前端自動(dòng)化構(gòu)建工具gulp入門(mén)

學(xué)過(guò)java的都知道馬士兵老師,他有一句口頭禪“穿二手鞋不如穿一手鞋”,一手鞋指的就是官方文檔。官方文檔看不懂,沒(méi)關(guān)系,先看這里,看完這里再去看官方。
官檔gulp.js中文網(wǎng)

理解gulp的特點(diǎn)
  • 任務(wù)化:gulp通過(guò)創(chuàng)建和配置一個(gè)個(gè)任務(wù)(task),來(lái)啟動(dòng)任務(wù)去構(gòu)建前端項(xiàng)目
  • 基于流 :gulp有自己的內(nèi)存,在任務(wù)啟動(dòng)時(shí),gulp首先讀?。ㄝ斎肓鳎┪募絞ulp內(nèi)存,在gulp內(nèi)存中進(jìn)行操作(合并、壓縮等),然后輸出(輸出流)到本地。
  • 異步(也可同步):gulp的任務(wù)不是同步執(zhí)行的,它不需要等一個(gè)任務(wù)執(zhí)行完再去啟動(dòng)執(zhí)行別的任務(wù),這點(diǎn)下面會(huì)提到
gulp.src() //讀取文件到內(nèi)存
gulp.dest()//輸出文件到本地
gulp.task()//注冊(cè)任務(wù)
第一個(gè)gulp任務(wù)
//在gulpfile.js中注冊(cè)一個(gè)任務(wù)
gulp.task('taskName',function(){
  //配置任務(wù)的操作
})

啟動(dòng)任務(wù):在cli中輸入: gulp taskName taskName是你剛剛注冊(cè)的任務(wù)名
如果你的gulp任務(wù)很多的話(huà),要一個(gè)一個(gè)去啟動(dòng)很麻煩,這時(shí)可注冊(cè)默認(rèn)任務(wù),通過(guò)默認(rèn)任務(wù)來(lái)啟動(dòng)其他任務(wù)

gulp.task('default',['taskName1','taskName2'])

啟動(dòng)默認(rèn)任務(wù)只需在cli中輸入gulp

常用插件

gulp-concat 合并文件(js/css)
gulp-uglify壓縮js文件
gulp-rename文件重命名
gulp-less編譯less
gulp-clean-css壓縮css
gulp-livereload實(shí)時(shí)刷新

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容