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