gulp編譯less
A. 用gulp讓less實時轉生成的css怎樣引入html文件不生效
可能存在的原因：
css的引用路徑是否准確（瀏覽器打開HTML文件，然後右鍵查看源碼，點下引入的css，看看能不能打開），能則下一步。
less編譯的css存放路徑是否准確。生成之後，看下前後兩次生成的css文件是否有變化。有則往下分析；
要想效果實時生效，需要瀏覽器能自動刷新或者自動載入，這是必要，不然即使less能自動化編譯，但如果瀏覽器不能自動刷新或者自動載入，那效果也是不能實時改變的。目前能實現瀏覽器頁面自動刷新的gulp插件有：gulp-connect，不知道你用進去了沒，沒用的可以試試？
gulp-connect 配置問題或者瀏覽器livereload插件沒有工作。如果確定配置沒問題，可以在命令行窗口按Ctrl+C停掉gulp任務，然後重新運行gulp任務就好。
ps:還不行的話，建議把gulpfile.js源碼發來大家看看找出原因。
B. 為什麼修改代碼之後 gulp build就會恢復到沒修改之前的代碼呢
這個原因可能是因為這個school.css是由css預處理器編譯出來的，你看看是不是有叫school.less或者school.scss這種類似的文件，去修改這裡面對應的圖片路徑，不然你只修改css文件是沒用的，編譯後會被覆蓋掉
C. 前端構建工具Gulp.js 你知多少..(webpack/gulp/grunt)
@ TOC
閱讀本文章之前，相信你已經對前端構建工具(webpack、gulp、grunt)有一定的認知和了解了，那麼他們之間究竟有什麼區別呢？
gulp文檔上面有這么一句話 ，也就是說 gulp是一個自動化構建工具；
gulp的一些功能如下(包括但不限於):
其實Webpack和另外兩個並沒有太多的可比性
傻瓜式起步照搬官網文檔
1.安裝
2.在項目根目錄下創建一個名為 gulpfile.js 的文件：
3.運行 gulp：
默認的名為 default 的任務（task）將會被運行，在這里，這個任務並未做任何事情。
具體詳情可以查看 gulpjs.com文檔
新建一個項目gulp-test
環境:
1.新建文件以下文件如下
其中 gulpfile.js 是我們gulp的配置文件，啟動gulp默認會找個這個文件並執行；
2.接下來安裝依賴
一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結構是這樣了
安裝依賴
這里頁面實時刷新只講這個 gulp-connect ，其他詳情可以參照 Browsersync 和文章 gulp-livereload
安裝完依賴後配置gulpfile.js如下:
大概講解一下gulpfile.js:
gulp.task 是gulp的api 定義一個使用 Orchestrator 實現的任務（task）
如上我們定義了 my-task-js ， my-task-css ， html ， clean ， default ， watch ， server 等任務，其中:
my-task-js 是將 符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下；
my-task-css 是將 符合所提供的匹配模式的sass進行編譯(gulp-sass)、壓縮(gulp-uglify)、合並(gulp-concat)、重命名(gulp-rename)、輸出(gulp.dest)到/dist/css目錄下；
html 是將 符合所提供的匹配模式的html進行監聽，如果有變化則connect.reload()
clean 是如果任務重新啟動時 刪除舊文件；
default gulp默認啟動的任務
watch gulp的api 監視文件，並且可以在文件發生改動時候做一些事情。它總會返回一個 EventEmitter 來發射（emit） change 事件。
server 依賴gulp-connect啟動一個伺服器
配置完gulpfile.js之後，我們給js和css及html加點東西:
首先js/helloworld.js
css/index.scss
index.html
運行gulp
瀏覽器效果:
接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:
按保存之後，終端給我們報了一個錯:
查看js發現我們用了es6語法的聲明語句 但當前gulp無法處理es6語法，有問題解決問題，es6=>es5
解決方案:
安裝gulp-babel babel-core babel-preset-es2015
gulpfile.js修改如下:
運行
依然報上面的錯；找了一些原因發現，雖然安裝了相關依賴，卻沒有配置.babelrc文件，即babel還沒轉化es6
根目錄添加.babelrc文件
重新運行:
查看dist下的js文件
改變helloworld.js檢查頁面是否刷新
保存，頁面的天空藍換成你們喜歡的yellow顏色
修改index.scss 查看是否會刷新頁面
最後修改index.html 查看是否會刷新頁面
今天主要學習了gulp的簡單項目搭建及實時更新配置；其實gulp類似於grunt的弱化版，但更簡單好用，只是插件會少一些，目前主流的項目搭建工具主要是webpack，但依然有不少項目還用著gulp或者grunt
擴展:
下面還有一些樓主的學習筆記:
有興趣的可以多多交流@ 樓主博客
D. 璇烽棶gulp鍜寃ebpack鐨勫尯鍒
1銆乬ulp鏄宸ュ叿閾俱佹瀯寤哄伐鍏楓傚彲浠ラ厤鍚堝悇縐嶆彃浠跺仛jps.鍘嬬緝錛宑ss.鍘嬬緝錛宭ess緙栬瘧絳夛紝鍙浠ユ浛浠ｆ墜宸ュ疄鐜拌嚜鍔ㄥ寲宸ヤ綔銆
2銆佽寃ebpack鏄鏂囦歡鎵撳寘宸ュ叿錛屽彲浠ユ妸欏圭洰鐨勫悇縐峧ps.鏂囥乧ss.鏂囦歡絳夋墦鍖呭悎騫舵垚涓涓鎴栧氫釜鏂囦歡錛屼富瑕佺敤浜庢ā鍧楀寲鏂規堬紝棰勭紪璇戞ā鍧楃殑鏂規堛
3銆佸湪瀹氫箟鍜屼嬌鐢ㄧ被姣斾腑涓よ呴兘鏈夊悇鐨勭敤閫旓紝鍚屾椂webpack涓哄垵綰х紪璇戠▼搴忥紝gulp涓洪珮綰х紪璇戠▼搴忥紝鍦ㄥ姛鑳戒笂瑕佹瘮webpack搴旂敤紼嬪簭涓澶氥
4銆亀ebpack鍙浠ュ緢鏂逛究浣跨敤node_mole銆乪s6鎴栬呮牱寮忔敞鍏ョ瓑鍔熻兘錛屼綔涓烘渶鍒濈駭鐨勫姛鑳藉畾浣嶆т環姣旀渶楂橈紝webpack杈撳叆杈撳嚭閮戒互js涓轟富錛屽筯tml鍏奸【杈冨皯錛屽彲鐢ㄧ粍浠朵笉澶氬緢闅捐揪鍒板彲鐢ㄧ殑紼嬪害銆
5銆乬ulp鍦ㄧ紪紼嬫柟闈㈣緝涓哄嶆潅錛屼絾鏄鍙鐢ㄧ殑緇勪歡涔熶細鏇村氾紝鎵嬪姩緙栬瘧鐨勬儏鍐典笅鑰楁椂杈冮暱錛屽悓鏃舵よ蔣浠朵笉閫傚悎鍒濈駭鍏ラ棬鑰呬嬌鐢ㄣ
璧勬枡鎷撳睍錛歡ulp鍜寃ebpack鍙浠ョ粍鍚堣搗鏉ヤ嬌鐢錛岃揪鍒板揩閫熺紪璇戠殑鐩鐨勶紝渚濋潬gulp涓板瘜鐨勭粍浠跺彲浠ュ緢濂藉湴璁﹋s鍜宧tml鑱斿姩閰嶇疆錛岃繘鑰屾帶鍒秝ebpack搴旂敤紼嬪簭錛屽疄鐜伴珮鑷鍔ㄥ寲銆
鏇村氬叧浜巊ulp鍜寃ebpack鐨勫尯鍒錛岃繘鍏ワ細https://www.abcgonglue.com/ask/1105281615983280.html?zd鏌ョ湅鏇村氬唴瀹