gulp如何保存后自動刷新？看這里就夠了

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

摘要：用我的話說這玩意就是可以在你本地啟動一個服務(wù)，然后當我們在源文件中保存的代碼，那么瀏覽器就會自動刷新，不用每次我們還得切換到瀏覽器手動刷新，如果你是雙顯辦公的，那么這滋味叫一個爽字了得。

gulp

使用gulp有段時間，之前因為工作比較忙，一直沉浸在webpack構(gòu)建的項目中不能自拔，哎。。。說多了都是淚，終于有點時間了，可以添加這個功能并和大家分享了，覺得好的話請點個贊，如果。。。。畢竟入行時間不長，大神請見諒

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

想要gulp保存自動刷新需要什么？

答：需要插件，需要gulp-connect這個插件，插件的詳細介紹大家可以上npm上搜索一下（只要你不嫌棄）。用我的話說這玩意就是可以在你本地啟動一個服務(wù)，然后當我們在源文件中保存的代碼，那么瀏覽器就會自動刷新，不用每次我們還得切換到瀏覽器手動刷新，如果你是雙顯辦公的，那么這滋味叫一個爽字了得。

上代碼

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

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

就這樣？那你可就錯了

其實單單這樣寫還沒有結(jié)束，因為你還沒有告訴gulp你要將這個刷新在什么地方執(zhí)行，例如

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

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

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

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