gulp-livereload 即時更新畫面

HTML, CSS 或 JavaScript 修正時，我們通常要到頁面重新整理才可以看到新的結果，而 livereload 套件可以自動幫我們完成重新整理這個動作

安裝 NPM

npm install gulp-livereload --save-dev

https://www.npmjs.com/package/gulp-livereload

使用

我們在 gulp watch 的時候，啟動 Livereload server，並在 CSS 或 JavaScript 異動時，使用pipe(gulpLivereload())自動重新載入頁面

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

// livereload即時更新
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch('./javascripts/**/*.js', ['js']);
    gulp.watch('./styles/**/*.scss', ['sass']);
});

// SASS
gulp.task('sass', function () { // 定義 sass 的任務名稱
  return gulp.src('./styles/**/*.scss') // 指定要處理的 Scss 檔案目錄
    .pipe(Sass()) // 編譯 Scss
    .pipe(gulp.dest('html/assets/css')) // sass 編譯完成後的匯出資料夾
    .pipe(cleanCSS()) //壓縮＆重新命名
    .pipe(rename(function(path){
        path.basename += ".min";
    }))
    .pipe(gulp.dest('./html/assets/css'))
    .pipe(livereload());  //當檔案有修改儲存自動更新頁面
});

// 壓縮合併ＪＳ
gulp.task('js', function() {
    return gulp.src('./javascripts/**/*.js') // 指定要處理的原始 JavaScript 檔案目錄
    .pipe(concat('default.js')) // 合併後的檔案名稱
    .pipe(gulp.dest('./html/assets/js')) // 指定合併後的 JavaScript 檔案目錄
    .pipe(uglify())                   // 壓縮
    .pipe(rename(function(path){
        path.basename += ".min";
    }))
    .pipe(gulp.dest('./html/assets/js')) // 指定合併後的 JavaScript 檔案目錄
    .pipe(livereload());    //當檔案有修改儲存自動更新頁面
});

執行

$ gulp watch
[16:57:47] Using gulpfile ~/gulpfile.js
[16:57:47] Starting 'watch'...
[16:57:47] Finished 'watch' after 14 ms
[16:58:02] Starting 'sass'...
[16:58:02] Finished 'sass' after 47 ms

安裝Chrome Extension 的外掛

Install Chrome Extension，安裝Chrome Extension: LiveReload，作為 client 端監控的插件。

未開啟

開啟

如果 CSS 或 JavaScript 有修正，瀏覽器就可以幫我們自動重新載入。