簡(jiǎn)介

gulp是一個(gè)前端自動(dòng)化構(gòu)建的神器，通過(guò)流操作，將上一步操作的輸出直接輸入到下一步，定制各種任務(wù)，比如編譯預(yù)處理css，轉(zhuǎn)碼壓縮js，來(lái)改進(jìn)網(wǎng)站開(kāi)發(fā)的過(guò)程，減少一些重復(fù)的操作，使開(kāi)發(fā)更加快速高效。

首先你最好了解一下node，npm，requirejs之類的知識(shí)，es6能懂一點(diǎn)就最好啦。

api

[gulp.task(name,[,deps],fn)][] 定義任務(wù) name:任務(wù)名稱 deps:依賴任務(wù)名稱 fn:回調(diào)函數(shù)
[gulp.src(globs[,options])][] 執(zhí)行任務(wù)處理的文件 globs:處理的文件路徑(字符串或字符串?dāng)?shù)組)
[gulp.dest(path[,options])][] 處理完后生成文件 path只能為文件路徑，不能指定文件名
[gulp.watch(glob[,opts],task)][] 用于監(jiān)聽(tīng)文件變化，文件一修改就執(zhí)行指定task任務(wù)。(watch還有一種寫(xiě)法在demo中會(huì)提到)

注意

• task任務(wù)中的依賴任務(wù)會(huì)先執(zhí)行，這里可能出現(xiàn)依賴任務(wù)為異步的情況，可以用cb讓依賴任務(wù)告知你任務(wù)執(zhí)行完畢，或者steam，或者promise來(lái)解決。
• dest中的path參數(shù)是文件夾路徑，也就是生成文件的名字和你給的路徑?jīng)]有關(guān)系，比如path：a/b.js；那么你生成的文件路徑可能為：a/b.js/xx.js；它會(huì)將b.js識(shí)別成文件夾。
• dest中做了通配符的路徑：gulp.src('script/**/*.js')
  ? .pipe(gulp.dest('dist')); //最后生成的文件路徑為 dist/**/*.js

demo

//引入模塊 require('node_modules里對(duì)應(yīng)的模塊')
const gulp = require('gulp'),
      less = require('gulp-less');

//定義一個(gè)testLess任務(wù) (自定義任務(wù)名稱)
gulp.task('testLess',() => { //es6的箭頭函數(shù)
  gulp.src('src/less/index.less') //該任務(wù)針對(duì)的文件
      .pipe(less()) //該任務(wù)調(diào)用的模塊
      .pipe(gulp.dest('src/css')); //將會(huì)在src/css下生成index.css文件
})；

//當(dāng)**.less文件發(fā)生改變時(shí)，執(zhí)行后面的箭頭函數(shù)(es6)
gulp.watch(['./src/less/**.less']).on('change',(event)=>{
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  //do something. 可以是reload
})

gulp.task('dev',['testLess','other Task']);//可以將所有任務(wù)包裝在這個(gè)任務(wù)里面，然后由它去處理。

//運(yùn)行時(shí)只需要gulp task任務(wù)名字就可以了，比如task dev。當(dāng)要輸入的代碼很長(zhǎng)的時(shí)候，我們可以將它配置在package.json的script中，用npm run xxx去運(yùn)行。

gulp常用插件

run-sequence：gulp里的task都是異步并發(fā)執(zhí)行的，[runSequence][]可以讓task任務(wù)按照順序執(zhí)行。

child_process：[require('child_process').exec][]可以讓我們?cè)诖a中執(zhí)行shell指令