學(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首先讀韧菘恪(輸入流)文件到gulp內(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í)刷新