크롬에서 자동 리프레시가 되게 해주는 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/

Posted by 김용환 '김용환'