Node.js
변경시 자동로드

nodemon을 사용하여 소스 코드 변경시 자동로드

nodemon 패키지는 소스 코드에서 파일을 수정할 때 자동으로 프로그램을 다시로드 할 수있게합니다.

전역으로 nodemon 설치

npm install -g nodemon (또는 npm i -g nodemon )

로컬로 nodemon 설치

전 세계적으로 설치하지 않으려는 경우

npm install --save-dev nodemon (또는 npm i -D nodemon )

nodemon 사용

nodemon entry.js (또는 nodemon entry )로 프로그램을 실행하십시오.

이것은 node entry.js (또는 node entry )의 일반적인 사용을 대체합니다.

nodemon 시작을 npm 스크립트로 추가 할 수도 있습니다. 매개 변수를 제공하고 매번 매개 변수를 입력하지 않으려는 경우 유용 할 수 있습니다.

package.json 추가 :

  "scripts": {
    "start": "nodemon entry.js -devmode -something 1"
  }

이렇게하면 콘솔에서 npm start 를 사용할 수 있습니다.

브라우저 동기화

개요

Browsersync 는 실시간 파일보기 및 브라우저 다시로드를 허용하는 도구입니다. NPM 패키지 로 제공됩니다.

설치

Browsersync를 설치하려면 먼저 Node.js 와 NPM을 설치해야합니다. 자세한 내용은 Node.js 설치 및 실행 에 대한 SO 설명서를 참조하십시오.

프로젝트가 설정되면 다음 명령을 사용하여 Browsersync를 설치할 수 있습니다.

$ npm install browser-sync -D

이렇게하면 로컬 node_modules 디렉토리에 Browsersync가 설치되고 개발자 종속성에 저장됩니다.

전역으로 설치하려면 -D 플래그 대신 -g 플래그를 사용하십시오.

Windows 사용자

Windows에서 Browsersync를 설치하는 데 문제가있는 경우 Visual Studio를 설치해야 할 수 있으므로 빌드 도구에 액세스하여 Browsersync를 설치할 수 있습니다. 다음과 같이 사용중인 Visual Studio의 버전을 지정해야합니다.

$ npm install browser-sync --msvs_version=2013 -D

이 명령은 Visual Studio의 2013 버전을 지정합니다.

기본 사용법

프로젝트에서 JavaScript 파일을 변경할 때마다 사이트를 자동으로 다시로드하려면 다음 명령을 사용하십시오.

$ browser-sync start --proxy "myproject.dev" --files "**/*.js"

myproject.dev 를 프로젝트에 액세스 할 때 사용하는 웹 주소로 바꿉니다. Browsersync는 프록시를 통해 사이트에 액세스하는 데 사용할 수있는 대체 주소를 출력합니다.

고급 사용

위에 설명 된 명령 행 인터페이스 외에도 Browsersync는 Grunt.js 및 Gulp.js 와 함께 사용할 수 있습니다.

Grunt.js

Grunt.js를 사용하면 다음과 같이 설치할 수있는 플러그인이 필요합니다.

$ npm install grunt-browser-sync -D

그런 다음이 줄을 gruntfile.js 추가합니다.

grunt.loadNpmTasks('grunt-browser-sync');

Gulp.js

Browsersync는 CommonJS 모듈로 작동하므로 Gulp.js 플러그인이 필요하지 않습니다. 간단히 이렇게 모듈을 요구하십시오 :

var browserSync = require('browser-sync').create();

이제 Browsersync API 를 사용하여 필요에 맞게 구성 할 수 있습니다.

API

Browsersync API는 다음에서 찾을 수 있습니다. https://browsersync.io/docs/api