gulp如何保存后自動(dòng)刷新？看這里就夠了

Zhuxy 發(fā)布于2019-08-01 16:25 / 2783人閱讀

摘要：用我的話說(shuō)這玩意就是可以在你本地啟動(dòng)一個(gè)服務(wù)，然后當(dāng)我們?cè)谠次募斜４娴拇a，那么瀏覽器就會(huì)自動(dòng)刷新，不用每次我們還得切換到瀏覽器手動(dòng)刷新，如果你是雙顯辦公的，那么這滋味叫一個(gè)爽字了得。

gulp

使用gulp有段時(shí)間，之前因?yàn)楣ぷ鞅容^忙，一直沉浸在webpack構(gòu)建的項(xiàng)目中不能自拔，哎。。。說(shuō)多了都是淚，終于有點(diǎn)時(shí)間了，可以添加這個(gè)功能并和大家分享了，覺(jué)得好的話請(qǐng)點(diǎn)個(gè)贊，如果。。。。畢竟入行時(shí)間不長(zhǎng)，大神請(qǐng)見(jiàn)諒

如果沒(méi)有g(shù)ulp的使用經(jīng)驗(yàn)的朋友可以看看我的這篇文章gulp工具使用，大白話講解

想要gulp保存自動(dòng)刷新需要什么？

答：需要插件，需要gulp-connect這個(gè)插件，插件的詳細(xì)介紹大家可以上npm上搜索一下（只要你不嫌棄）。用我的話說(shuō)這玩意就是可以在你本地啟動(dòng)一個(gè)服務(wù)，然后當(dāng)我們?cè)谠次募斜４娴拇a，那么瀏覽器就會(huì)自動(dòng)刷新，不用每次我們還得切換到瀏覽器手動(dòng)刷新，如果你是雙顯辦公的，那么這滋味叫一個(gè)爽字了得。

上代碼

var connect = require("gulp-connect");  //首先需要在gukpfile.js中require這個(gè)插件，不要忘記了在項(xiàng)目中npm install

//這是gulp-connect插件的使用方法
/*
*port端口號(hào)
*livereload的值如果是false的話就是關(guān)閉實(shí)時(shí)更新
*/
gulp.task("connect", function () {
    connect.server({
        port:"3333",
        livereload: true
    });
});
gulp.task("default", ["connect", "watch"]);  //看到watch大家應(yīng)該能猜到了，就是開(kāi)啟監(jiān)聽(tīng)的意思

就這樣？那你可就錯(cuò)了

其實(shí)單單這樣寫還沒(méi)有結(jié)束，因?yàn)槟氵€沒(méi)有告訴gulp你要將這個(gè)刷新在什么地方執(zhí)行，例如

gulp.task("scripts",function(){
    gulp.src([paths.src_js])
    .pipe(babel({
        presets:["es2015"]
    }))
    .pipe(gulp.dest(paths.dist_js)) //輸出到指定文件夾
    .pipe(connect.reload())  //自動(dòng)刷新
    .pipe(notify({ message: "Scripts is OK" })) //提醒任務(wù)完成
)}
/*
*例如
*這是我的一個(gè)script任務(wù)，大家一定要記住在任務(wù)處理完后加上.pipe(connect.reload())
*/

當(dāng)你配置好了文件之后就使用命令 gulp 就Ok了，這是就會(huì)啟動(dòng)一個(gè)localhost:3333的服務(wù)，這是你在進(jìn)入你的編譯后的文件目錄例如localhost:3333/dist/index.html,這時(shí)候你修改了樣式文件或者JS文件等瀏覽器就會(huì)實(shí)時(shí)刷新。

這是還有一個(gè)坑，就是這個(gè)實(shí)時(shí)刷新對(duì)啟動(dòng)服務(wù)后新創(chuàng)建的文件是無(wú)效的。怎么理解呢？其實(shí)就是這樣，比如我現(xiàn)在有一個(gè)JS的文件夾，里面只有一個(gè)index.js的文件，然后我輸入命令gulp啟動(dòng)了服務(wù)，啟動(dòng)服務(wù)之后我現(xiàn)在又創(chuàng)建了一個(gè)sub.js文件，那么現(xiàn)在這個(gè)sub.js文件經(jīng)行了修改是不編譯的,除非你停掉當(dāng)前的服務(wù)，然后重新啟動(dòng)一下。我也想解決這個(gè)問(wèn)題，但是到目前為之還沒(méi)有好的解決方案，如果有知道的大神，也可以告訴我一下，小弟在此謝謝了！

鄙人口才不太好，也不知道大家到底有沒(méi)有看明白。沒(méi)關(guān)系
github的項(xiàng)目地址，我已經(jīng)配置好了，而且在gulpfile.js中寫了很多的注釋，有興趣可以看看，覺(jué)得不錯(cuò)的話請(qǐng)點(diǎn)一個(gè)START（這個(gè)項(xiàng)目dist是編譯過(guò)后的文件,src是源文件），如果有問(wèn)題的話也可以issues