gulp 插件之 gulp-livereload

gulp-livereload 的簡介：

            gulp-livereload 插件用于實時重載，當 html，css 文件內容發生改變時，瀏覽器會自動刷新頁面。在使用 gulp-livereload 插件時需要瀏覽器安裝相應的 liveReload 插件（瀏覽器插件）

一、gulp-livereload 插件的使用

1、全局安裝 http-server 模塊命令（用于提供 web 服務）

            npm install -g http-server

2、安裝 “gulp-livereload”插件命令（在終端進入到項目根目錄執行）

            npm install --save-dev  gulp-load-plugins gulp-livereload gulp-less

3、在項目根目錄下提供 "gulp-livereload" 插件任務配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

4、在 gulpfile.js 文件中配置使用 "gulp-livereload"

 具體示例：
var gulp = require('gulp'),    
      plugins = require('gulp-load-plugins')();       // 裝載插件
      
gulp.task('less', function () {                                 // 自定義 "less" 任務
    return gulp.src('src/less/*.less')                        // 模糊匹配 src/less 目錄下所有 less 文件
        .pipe(plugins.less())                                      // 調用 gulp-less 插件
        .pipe(gulp.dest('dist/css'))                           // 目標文件存放路徑
        .pipe(plugins.livereload());                           // 調用 gulp-livereload 插件
});

gulp.task('livereload', function () {                       // 自定義 "livereload" 任務
        plugins.livereload.listen({ start: true });        // 調用 gulp-livereload 插件的 listen() 方法
        gulp.watch('src/less/*.less', ['less']);             // 監聽 src/less 目錄下的所有 less 文件，自動執行 "less" 任務
});

// gulp-livereload 插件的 livereload(options) 和 livereload.listen(options) 方法的參數詳解：
        port                                         Server port
        host                                         Server host
        basePath                                  Path to prepend all given paths
        start                                          Automatically start
        quiet             false                    Disable console logging
        reloadPage   index.html           Path to the page the browsers on for a full page reload
        
PS：參考 https://www.npmjs.com/package/gulp-livereload

5、運行 “http-server”web 服務命令（在終端進入到項目根目錄執行）

            http-server

6、在瀏覽器中訪問項目根目錄并且啟動瀏覽器的 liveReload 插件

            localhost:8080  （http-server 服務的默認地址）

PS：到此如果配置沒有問題的話，就可以在瀏覽器中瀏覽到項目根目錄下的所有文件了。

7、最后在終端運行 "gulp livereload" 命令

PS：如果沒有錯誤提示信息，證明就沒什么問題了。現在去修改源文件，看看瀏覽器是否可以自動刷新頁面。未完待續。。。