gulp

安裝使用

? ? 1.全局安裝 npm install --global gulp

? ? 2.項(xiàng)目依賴?npm install --save-dev gulp

? ? 3.在項(xiàng)目根目錄下創(chuàng)建一個(gè)名為?gulpfile.js?的文件:

? ??????var gulp = require('gulp');

????????gulp.task('default', function(){

? ? ? ? ?// 將你的默認(rèn)的任務(wù)代碼放在這});

? ? 4.運(yùn)行g(shù)ulp,文件中的default任務(wù)會(huì)被執(zhí)行,單獨(dú)指定任務(wù)?gulp <task> <othertask>

API

gulp.src(globs[,options])? ? ?gulp.src('client/templates/*.jade')? ??

????輸出符合提供的匹配模式,或者匹配模式數(shù)組的文件,將返回一個(gè)?Vinyl files?的?stream?它可以被?piped?到別的插件中。

參數(shù)說(shuō)明?

????globs?所要讀取的 glob 或者包含 globs 的數(shù)組。

????options?通過(guò)?glob-stream?所傳遞給?node-glob?的參數(shù)。除了?node-glob?和?glob-stream?所支持的參數(shù)外,gulp 增加了一些額外的選項(xiàng)參數(shù):

????options.buffer? Boolean 默認(rèn)true?如果該項(xiàng)被設(shè)置為?false,那么將會(huì)以 stream 方式返回?file.contents?而不是文件 buffer 的形式

? ??options.read? Boolean?默認(rèn)值:?true? 如果該項(xiàng)被設(shè)置為?false, 那么?file.contents?會(huì)返回空值(null),也就是并不會(huì)去讀取文件。

options.base????String?默認(rèn)值: 將會(huì)加在 glob 之前

node-golb語(yǔ)法?https://github.com/isaacs/node-glob

gulp.dest(path[, options])

gulp.src('./client/templates/*.jade').pipe(gulp.dest(path[, options]))????能被 pipe 進(jìn)來(lái),并且將會(huì)寫文件。并且重新輸出(emits)所有數(shù)據(jù),因此你可以將它 pipe 到多個(gè)文件夾。如果某文件夾不存在,將會(huì)自動(dòng)創(chuàng)建它。

參數(shù)說(shuō)明?

path????String?or?Function????文件將被寫入的路徑(輸出目錄)。也可以傳入一個(gè)函數(shù),在函數(shù)中返回相應(yīng)路徑,這個(gè)函數(shù)也可以由?vinyl 文件實(shí)例?來(lái)提供。

options.cwd????String?默認(rèn)值:?process.cwd() 輸出目錄的?cwd?參數(shù),只在所給的輸出目錄是相對(duì)路徑時(shí)候有效。

options.mode????String?默認(rèn)值:?0777????八進(jìn)制權(quán)限字符,用以定義所有在輸出目錄中所創(chuàng)建的目錄的權(quán)限。

gulp.task(name[, deps], fn)

參數(shù)說(shuō)明

name????任務(wù)的名字,如果你需要在命令行中運(yùn)行你的某些任務(wù),那么,請(qǐng)不要在名字中使用空格。

deps????Array????一個(gè)包含任務(wù)列表的數(shù)組,這些任務(wù)會(huì)在你當(dāng)前任務(wù)運(yùn)行之前完成。

????gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { 。。。});

注意:?你的任務(wù)是否在這些前置依賴的任務(wù)完成之前運(yùn)行了?請(qǐng)一定要確保你所依賴的任務(wù)列表中的任務(wù)都使用了正確的異步執(zhí)行方式:使用一個(gè) callback,或者返回一個(gè) promise 或 stream。

gulp.watch(glob[, opts], tasks)

參數(shù)說(shuō)明

glob????String?or?Array????一個(gè) glob 字符串,或者一個(gè)包含多個(gè) glob 字符串的數(shù)組,用來(lái)指定具體監(jiān)控哪些文件的變動(dòng)。

opts????Object????傳給?gaze?的參數(shù)。

tasks????Array????需要在文件變動(dòng)后執(zhí)行的一個(gè)或者多個(gè)通過(guò)?gulp.task()?創(chuàng)建的 task 的名字

gulp.watch(glob[, opts, cb])

glob????String?or?Array????一個(gè) glob 字符串,或者一個(gè)包含多個(gè) glob 字符串的數(shù)組,用來(lái)指定具體監(jiān)控哪些文件的變動(dòng)。

opts????Object????傳給?gaze?的參數(shù)。

cb(event)? ? Function????每次變動(dòng)需要執(zhí)行的 callback。

gulp.watch('js/**/*.js', function(event){

? console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');

});????

callback 會(huì)被傳入一個(gè)名為?event?的對(duì)象。這個(gè)對(duì)象描述了所監(jiān)控到的變動(dòng):

event.type????String????發(fā)生的變動(dòng)的類型:added,?changed?或者?deleted。

event.path????String????觸發(fā)了該事件的文件的路徑。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • gulpjs是一個(gè)前端構(gòu)建工具,與gruntjs相比,gulpjs無(wú)需寫一大堆繁雜的配置參數(shù),API也非常簡(jiǎn)單,學(xué)...
    依依玖玥閱讀 3,196評(píng)論 7 55
  • 1、gulp的安裝 首先確保你已經(jīng)正確安裝了nodejs環(huán)境。然后以全局方式安裝gulp: npm install...
    F_imok閱讀 2,406評(píng)論 1 11
  • 對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,并使用不同瀏覽器測(cè)試并不是網(wǎng)站設(shè)計(jì)過(guò)程中最有意思的部分,但是這個(gè)過(guò)程中的很多重復(fù)的任務(wù)能夠使用...
    懵逼js閱讀 1,094評(píng)論 0 8
  • 編輯于2015年 轉(zhuǎn)載自某作者的譯文 作者要是看到請(qǐng)聯(lián)系我注明出處 對(duì)網(wǎng)站資源進(jìn)行優(yōu)化,并使用不同瀏覽器測(cè)試并不是...
    krock01閱讀 455評(píng)論 0 2
  • 在慕課網(wǎng)上學(xué)習(xí)了 Canvas繪圖詳解 這門教程,寫了這篇canvas教程,想和大家分享學(xué)習(xí)的過(guò)程,希望和大家共同...
    愛(ài)可不可愛(ài)_90845閱讀 1,620評(píng)論 2 8