gulp如何保存後自動刷新？看這裏就夠了

gulp

使用gulp有段時間，以前由於工做比較忙，一直沉浸在webpack構建的項目中不能自拔，哎。。。說多了都是淚，終於有點時間了，能夠添加這個功能並和你們分享了，以爲好的話請點個贊，若是。。。。 畢竟入行時間不長，大神請見諒

---

若是沒有gulp的使用經驗的朋友能夠看看個人這篇文章gulp工具使用，大白話講解

想要gulp保存自動刷新須要什麼？

答：須要插件，須要gulp-connect這個插件，插件的詳細介紹你們能夠上npm上搜索一下（只要你不嫌棄）。用個人話說這玩意就是能夠在你本地啓動一個服務，而後當咱們在源文件中保存的代碼，那麼瀏覽器就會自動刷新，不用每次咱們還得切換到瀏覽器手動刷新，若是你是雙顯辦公的，那麼這滋味叫一個爽字了得。

---

上代碼

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

//這是gulp-connect插件的使用方法
/*
*port端口號
*livereload的值若是是false的話就是關閉實時更新
*/
gulp.task('connect', function () {
    connect.server({
        port:'3333',
        livereload: true
    });
});
gulp.task('default', ['connect', 'watch']);  //看到watch你們應該能猜到了，就是開啓監聽的意思

就這樣？那你可就錯了

其實單單這樣寫尚未結束，由於你尚未告訴gulp你要將這個刷新在什麼地方執行，例如

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' })) //提醒任務完成
)}
/*
*例如
*這是個人一個script任務，你們必定要記住在任務處理完後加上.pipe(connect.reload())
*/

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

---

這是還有一個坑，就是這個實時刷新對啓動服務後新建立的文件是無效的。怎麼理解呢？其實就是這樣，好比我如今有一個JS的文件夾，裏面只有一個index.js的文件，而後我輸入命令gulp啓動了服務，啓動服務以後我如今又建立了一個sub.js文件，那麼如今這個sub.js文件經行了修改是不編譯的,除非你停掉當前的服務，而後從新啓動一下。我也想解決這個問題，可是到目前爲之尚未好的解決方案，若是有知道的大神，也能夠告訴我一下，小弟在此謝謝了！

鄙人口才不太好，也不知道你們到底有沒有看明白。不要緊
github的項目地址，我已經配置好了，並且在gulpfile.js中寫了不少的註釋，有興趣能夠看看，以爲不錯的話請點一個START（這個項目dist是編譯事後的文件,src是源文件），若是有問題的話也能夠issues