[Node.Js] Node.Js - Gulp & BrowserSync

 Gulp

• Streaming build system
• 플러그인들을 통해 넓은 확장성npm init- 프로젝트마다 단 한번 반드시 수행npm install gulp -g- Gulp 설치(전역)npm install gulp --save-dev- 디펜던시들을 devDependency로만 설치(Gulp의 플러그인들을 설치할 때도 동일)npm install gulp-[plugin name] --save-dev- gulpfile.jsvar gulp = require("gulp");
  var concat = require("gulp-concat");gulp.task("combine-js", [lint-js], function () {
  return gulp.src("/public/js*.js")
  .pipe(concat("all.js"))
  .pipe(gulp.dest("public/dist/js"));
  });gulp.task("default", ["combine-js"]);gulp,task : gulp task를 선언, 3개의 파라미터가 포함되면 두번째는 생략 가능gulp.src("public/src/js/*.js") .pipe(stripDebug()) .pipe(uglify()) .pipe(concat("script.js")) .pipe(gulp.dest("public/dist/js"));public/src/js 폴더의 모든 js 파일들을 긁어옴 → stripDebug에게 파이핑(모든 console.log들과 alert 제거)gulp.task("default", [])는 command-line에서 아무런 argument없이 gulp를 실행했을 때 실행되는 taskgulp task-name특정 task 실행npm install gulp-webserver gulp-concat gulp-uglify gulp-minify-html gulp-sass gulp-livereload --save-dev
• - gulp-webserver : 웹 서버처럼 동작하게 하는 플러그인
  - gulp-concat : js 파일 병합
  - gulp-uglify : js 파일 압축
  - gulp-minify-html : html 파일 minify- gulp-sass : sass 파일 컴파일
  - gulp-livereload : 웹 프라우저 리로드
• → uglify에게 파이핑(JavaScript를 압축) → concat("script.js")로 파이핑(script.js 파일 하나로 병합) → gulp.dest()로 보냄
•   - name : task의 이름을 지정, 공백 불가
    - deps : 현재 선언하고 있는 task를 수행하기 전에 먼저 실행되어야하는 task들
    - func : 실제 수행할 task의 내용을 정의하는 function
  gulp.src(files) : 파일의 경로들이 포함된 배열 혹은 string
    - /**/*은 와일드 카드 형태(!제일 앞에 이게 있음 포함 금지)
  gulp.pipe(...) : pipe를 사용해서 task들의 결과물들을 funcction들에게 전달 가능
• node.js 기반의 task runner
• 반복적이거나 귀찮은 작업들이나 프론트엔드 빌드에 필요한 작업들을 쉽게 처리
• stream 기반의 build system
• node.js의 특징인 event-driven, non-blocking I/O를 바탕으로 요청 후 한번에 결과를 받는 것이 아니라 이벤트 중간 중간 전달받는 방식인 stream을 기반

 Browsersync

• 여러 브라우저에서 웹페이지의 테스트를 도와주는 도구, 브라우저 동기화

browser-sync --version

• npm 모듈이 제대로 설치 되었는지 확인

browser-sync start --server --files ["css/*.css", "js/*.js", "*.html"]

• --server 옵션은 현 위치에서 로컬 서버를 실행, --files로 감시할 파일 지정
  
  * 서버를 띄워 놓고 감시하는 파일을 수정하면 자동으로 브라우저를 리로드.