資訊專欄INFORMATION COLUMN
摘要：用我的話說這玩意就是可以在你本地啟動一個服務，然后當我們在源文件中保存的代碼，那么瀏覽器就會自動刷新，不用每次我們還得切換到瀏覽器手動刷新，如果你是雙顯辦公的，那么這滋味叫一個爽字了得。
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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81960.html
摘要：用我的話說這玩意就是可以在你本地啟動一個服務，然后當我們在源文件中保存的代碼，那么瀏覽器就會自動刷新，不用每次我們還得切換到瀏覽器手動刷新，如果你是雙顯辦公的，那么這滋味叫一個爽字了得。 gulp 使用gulp有段時間，之前因為工作比較忙，一直沉浸在webpack構建的項目中不能自拔，哎。。。說多了都是淚，終于有點時間了，可以添加這個功能并和大家分享了，覺得好的話請點個贊，如果。。。。...
摘要：瀏覽器緩存作為性能優化的重要一環，對于前端而言，重要性不言而喻。根據瀏覽器發送的修改時間和服務端的修改時間進行比對，一致的話代表資源沒有改變，服務端返回正文為空的響應，讓瀏覽器中緩存中讀取資源，這就大大減小了請求的消耗。 瀏覽器緩存作為性能優化的重要一環，對于前端而言，重要性不言而喻。以前總是一知半解的，所以這次好好整理總結了一下。 1、緩存機制 首先我們來總體感知一下它的匹配流程，如...
摘要：以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。強大的設計使得它更像是一個構建平臺，而不只是一個打包工具。 以前一直對前端構建工具的理解不深，經過幾天的研究特意來總結一下，第一次寫博客，有寫錯的請多多見諒，該文章我也從其他博客拷了一些內容，如果有冒犯之處，請指出。 如今，網頁不再...
摘要：所以它在某些程度上，跟的功能有些相同。嚴格上講，模塊化不是他強調的東西，他旨在規范前端開發流程。更是明顯強調模塊化開發，而那些文件壓縮合并預處理等功能，不過是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來說一下 webpack 是什么。 webpack 的...
閱讀 3069·2021-09-28 09:43
閱讀 902·2021-09-08 09:35
閱讀 1440·2019-08-30 15:56
閱讀 1183·2019-08-30 13:00
閱讀 2732·2019-08-29 18:35
閱讀 1829·2019-08-29 14:07
閱讀 3432·2019-08-29 13:13
閱讀 1333·2019-08-29 12:40
