gulp-livereload 的簡(jiǎn)介：

洮北網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),洮北網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為洮北上千余家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的洮北做網(wǎng)站的公司定做！

            gulp-livereload 插件用于實(shí)時(shí)重載，當(dāng) html，css 文件內(nèi)容發(fā)生改變時(shí)，瀏覽器會(huì)自動(dòng)刷新頁(yè)面。在使用 gulp-livereload 插件時(shí)需要瀏覽器安裝相應(yīng)的 liveReload 插件（瀏覽器插件）

一、gulp-livereload 插件的使用

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

            npm install -g http-server

2、安裝 “gulp-livereload”插件命令（在終端進(jìn)入到項(xiàng)目根目錄執(zhí)行）

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

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

            mkdir src

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

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

gulp.task('livereload', function () {                       // 自定義 "livereload" 任務(wù)
       plugins.livereload.listen({ start: true });        // 調(diào)用 gulp-livereload 插件的 listen() 方法
       gulp.watch('src/less/*.less', ['less']);             // 監(jiān)聽 src/less 目錄下的所有 less 文件，自動(dòng)執(zhí)行 "less" 任務(wù)
});

// gulp-livereload 插件的 livereload(options) 和 livereload.listen(options) 方法的參數(shù)詳解：
       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、運(yùn)行 “http-server”web 服務(wù)命令（在終端進(jìn)入到項(xiàng)目根目錄執(zhí)行）

            http-server

6、在瀏覽器中訪問(wèn)項(xiàng)目根目錄并且啟動(dòng)瀏覽器的 liveReload 插件

            localhost:8080  （http-server 服務(wù)的默認(rèn)地址）

PS：到此如果配置沒(méi)有問(wèn)題的話，就可以在瀏覽器中瀏覽到項(xiàng)目根目錄下的所有文件了。

7、最后在終端運(yùn)行 "gulp livereload" 命令

PS：如果沒(méi)有錯(cuò)誤提示信息，證明就沒(méi)什么問(wèn)題了?，F(xiàn)在去修改源文件，看看瀏覽器是否可以自動(dòng)刷新頁(yè)面。未完待續(xù)。。。

文章題目：gulp插件之gulp-livereload
文章起源：http://www.rwnh.cn/article46/gcgshg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、動(dòng)態(tài)網(wǎng)站、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設(shè)、App開發(fā)、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)