gulp插件之gulp-livereload-創(chuàng)新互聯(lián)

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

創(chuàng)新互聯(lián)從2013年成立，是專(zhuān)業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元大安市做網(wǎng)站,已為上家服務(wù),為大安市各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

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)聽(tīng) 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ù)。。。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

新聞標(biāo)題：gulp插件之gulp-livereload-創(chuàng)新互聯(lián)
文章來(lái)源：http://muchs.cn/article14/cdspde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站、定制開(kāi)發(fā)、App設(shè)計(jì)、品牌網(wǎng)站制作、網(wǎng)站制作

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(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)

猜你還喜歡下面的內(nèi)容