항상 최신 데이터 보여주기 : gulp + livereload 조합

크롬에서 자동 리프레시가 되게 해주는 gulp livereload를 설치할 수 있다 

ctrl + f 누르지 않고도 데이터가 수정되자마자 사용자가 바로 바뀌어진 문서를 보게 할 수 있다. 

gulp 설치

$ npm install --save-dev gulp gulp-watch gulp-livereload

$ npm link gulp

gulpfile.js 파일

$ vi  gulpfile.js

var gulp = require('gulp');

var pug = require('gulp-pug');

var less = require('gulp-less');

var minifyCSS = require('gulp-csso');

gulp.task('html', function(){

  return gulp.src('client/templates/*.pug')

    .pipe(pug())

    .pipe(gulp.dest('build/html'))

});

gulp.task('css', function(){

  return gulp.src('client/templates/*.less')

    .pipe(less())

    .pipe(minifyCSS())

    .pipe(gulp.dest('build/css'))

});

gulp.task('default', [ 'html', 'css' ]);

gulp를 실행한다. 

$ gulp watch

[20:15:03] Using gulpfile ... gulpfile.js

[20:15:03] Starting 'watch'...

크롬에서는 livereload 플러그인을 실행한다. 

완료!

참고 : http://hochulshin.com/gulp-livereload-sample/