gulp 插件之 gulp-livereload

gulp-livereload 的簡介：

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

1、gulp-livereload 插件的使用

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

            npm install -g http-server

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

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

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

            mkdir src

四、在 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

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

            http-server

六、在瀏覽器中訪問項目根目錄而且啓動瀏覽器的 liveReload 插件

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

PS：到此若是配置沒有問題的話，就能夠在瀏覽器中瀏覽到項目根目錄下的全部文件了。

七、最後在終端運行 "gulp livereload" 命令

PS：若是沒有錯誤提示信息，證實就沒什麼問題了。如今去修改源文件，看看瀏覽器是否能夠自動刷新頁面。未完待續。。。