gulp-livereload
當 HTML, CSS 或 JavaScript 異動時，自動重新載入頁面
前言
當我們異動 HTML, CSS 或 JavaScript 檔案時，我們通常要到頁面重新整理才可以看到新的結果，而 livereload 套件可以自動幫我們完成 重新整理 這個動作
安裝
$ npm install --save-dev gulp-livereload
使用 livereload
我們在 gulp watch 的時候，啟動 Livereload server，並在 CSS 或 JavaScript 異動時，使用 pipe(gulpLivereload()) 自動重新載入頁面
var gulp = require('gulp'), // 載入 gulp
gulpUglify = require('gulp-uglify'), // 載入 gulp-uglify
gulpSass = require('gulp-sass'), // 載入 gulp-sass
gulpPlumber = require('gulp-plumber'),// 載入 gulp-plumber
gulpLivereload = require('gulp-livereload'); // 載入 gulp-livereload
gulp.task('watch', function () {
gulpLivereload.listen();
gulp.watch('javascript/original/*.js', ['scripts']);
gulp.watch('scss/**/*.scss', ['styles']);
});
gulp.task('script', function () {
gulp.src('javascript/original/*.js') // 指定要處理的原始 JavaScript 檔案目錄
.pipe(gulpPlumber()) // 使用 gulp-plumber 處理例外
.pipe(gulpUglify()) // 將 JavaScript 做最小化
.pipe(gulp.dest('javascript/minify')), // 指定最小化後的 JavaScript 檔案目錄
.pipe(gulpLivereload()); // 當檔案異動後自動重新載入頁面
});
gulp.task('styles', function () {
gulp.src('scss/**/*.scss') // 指定要處理的 Scss 檔案目錄
.pipe(gulpPlumber()) // 使用 gulp-plumber 處理例外
.pipe(gulpSass({ // 編譯 Scss
outputStyle: 'compressed'
}))
.pipe(gulp.dest('css')). // 指定編譯後的 css 檔案目錄
.pipe(gulpLivereload()); // 當檔案異動後自動重新載入頁面
});
開啟 gulp watch 及 livereload server
$ gulp watch
[22:08:31] Using gulpfile ~/Code/italkjob/gulpfile.js
[22:08:31] Starting 'watch'...
[22:08:31] Finished 'watch' after 23 ms
[22:08:31] Starting 'default'...
[22:08:31] Finished 'default' after 22 μs
[22:08:31] /Users/kejyun/Project/css/test.css reloaded.
[22:08:31] /Users/kejyun/Project/javascript/minify/test.js reloaded.
安裝 Chrome Livereload 套件
我們開啟 Chrome 安裝Livereload Chrome 套件，之後會在瀏覽器的右上角看到 Livereload 套件的圖示，示意如下：
之後我們點選此 icon，會看到中間空心圓變成實心圓，這樣的話表示開啟成功
之後我們異動任何的 CSS 或 JavaScript，瀏覽器就可以幫我們自動重新載入摟，Enjoy it～