對(duì)網(wǎng)站資源進(jìn)行優(yōu)化，并使用不同瀏覽器測(cè)試并不是網(wǎng)站設(shè)計(jì)過程中最有意思的部分坷襟，但是這個(gè)過程中的很多重復(fù)的任務(wù)能夠使用正確的工具自動(dòng)完成翔怎，從而使效率大大提高，這是讓很多開發(fā)者覺得有趣的地方乐纸。Gulp是一個(gè)構(gòu)建系統(tǒng)，它能通過自動(dòng)執(zhí)行常見任務(wù)摇予，比如編譯預(yù)處理CSS汽绢，壓縮JavaScript和刷新瀏覽器，來改進(jìn)網(wǎng)站開發(fā)的過程侧戴。通過本文宁昭，我們將知道如何使用Gulp來改變開發(fā)流程，從而使開發(fā)更加快速高效酗宋。What Is Gulp?Gulp是一個(gè)構(gòu)建系統(tǒng)积仗，開發(fā)者可以使用它在網(wǎng)站開發(fā)過程中自動(dòng)執(zhí)行常見任務(wù)。Gulp是基于Node.js構(gòu)建的蜕猫，因此Gulp源文件和你用來定義任務(wù)的Gulp文件都被寫進(jìn)了JavaScript（或者CoffeeScript）里寂曹。前端開發(fā)工程師還可以用自己熟悉的語(yǔ)言來編寫任務(wù)去lint JavaScript和CSS、解析模板以及在文件變動(dòng)時(shí)編譯LESS文件（當(dāng)然這些只是一小部分例子）回右。Gulp本身雖然不能完成很多任務(wù)隆圆，但它有大量插件可用，開發(fā)者可以訪問插件頁(yè)面或者在npm搜索gulpplugin就能看到翔烁。例如渺氧，有些插件可以用來執(zhí)行JSHint、編譯CoffeeScript蹬屹，執(zhí)行Mocha測(cè)試侣背，甚至更新版本號(hào)。對(duì)比其他構(gòu)建工具慨默，比如Grunt秃踩，以及最近流行的Broccoli，我相信Gulp會(huì)更勝一籌（請(qǐng)看后面的”Why Gulp?”部分）业筏，同時(shí)我匯總了一個(gè)使用Javascript編寫的構(gòu)建工具清單，可供大家參考鸟赫。Gulp是一個(gè)可以在GitHub上找到的開源項(xiàng)目蒜胖。Installing Gulp安裝Gulp的過程十分簡(jiǎn)單消别。首先，需要在全局安裝Gulp包：npm install -g gulp然后台谢，在項(xiàng)目里面安裝Gulp：npm install --save-dev gulpUsing Gulp現(xiàn)在我們創(chuàng)建一個(gè)Gulp任務(wù)來壓縮JavaScript文件寻狂。首先創(chuàng)建一個(gè)名為gulpfile.js的文件，這是定義Gulp任務(wù)的地方朋沮，它可以通過gulp命令來運(yùn)行蛇券，接著把下面的代碼放到gulpfile.js文件里面。var gulp = require('gulp'), ? uglify = require('gulp-uglify');gulp.task('minify', function () { ? gulp.src('js/app.js') ? ? ?.pipe(uglify()) ? ? ?.pipe(gulp.dest('build'))});然后在npm里面運(yùn)行npm install -–save-dev gulp-uglify來安裝gulp-uglify樊拓，最后通過運(yùn)行g(shù)ulp minify來執(zhí)行任務(wù)纠亚。假設(shè)js目錄下有個(gè)app.js文件，那么一個(gè)新的app.js將被創(chuàng)建在編譯目錄下筋夏，它包含了js/app.js的壓縮內(nèi)容蒂胞。想一想，到底發(fā)生了什么条篷？我們只在gulpfile.js里做了一點(diǎn)事情骗随。首先，我們加載gulp和gulp-uglify模塊：var gulp = require('gulp'), ? ?uglify = require('gulp-uglify');然后赴叹，我們定義了一個(gè)叫minify的任務(wù)鸿染，它執(zhí)行時(shí)會(huì)調(diào)用函數(shù)，這個(gè)函數(shù)會(huì)作為第二個(gè)參數(shù)：gulp.task('minify', function () {});最后乞巧，也是難點(diǎn)所在涨椒，我們需要定義任務(wù)應(yīng)該做什么：gulp.src('js/app.js') ? .pipe(uglify()) ? .pipe(gulp.dest('build'))如果你對(duì)數(shù)據(jù)流非常熟悉（其實(shí)大多數(shù)前端開發(fā)人員并不熟悉），上面所提供的代碼對(duì)你來說就沒有太大意義了摊欠。STREAMS數(shù)據(jù)流能夠通過一系列的小函數(shù)來傳遞數(shù)據(jù)丢烘，這些函數(shù)會(huì)對(duì)數(shù)據(jù)進(jìn)行修改，然后把修改后的數(shù)據(jù)傳遞給下一個(gè)函數(shù)些椒。在上面的例子中播瞳，gulp.src()函數(shù)用字符串匹配一個(gè)文件或者文件的編號(hào)（被稱為“glob”）,然后創(chuàng)建一個(gè)對(duì)象流來代表這些文件，接著傳遞給uglify()函數(shù)免糕，它接受文件對(duì)象之后返回有新壓縮源文件的文件對(duì)象赢乓，最后那些輸出的文件被輸入gulp.dest()函數(shù)，并保存下來石窑。整個(gè)數(shù)據(jù)流動(dòng)過程如下圖所示： 當(dāng)只有一個(gè)任務(wù)的時(shí)候牌芋，函數(shù)并不會(huì)起太大的作用。然而松逊，仔細(xì)思考下面的代碼：gulp.task('js', function () { ? return gulp.src('js/*.js') ? ? ?.pipe(jshint()) ? ? ?.pipe(jshint.reporter('default')) ? ? ?.pipe(uglify()) ? ? ?.pipe(concat('app.js')) ? ? ?.pipe(gulp.dest('build'));});在運(yùn)行這段程序之前躺屁，你需要先安裝gulp,gulp-jshint,gulp-uglify和gulp-concat。這個(gè)任務(wù)會(huì)讓所有的文件匹配js/*.js（比如js目錄下的所有JavaScript文件）经宏，并且執(zhí)行JSHint犀暑，然后打印輸出結(jié)果驯击，取消文件縮進(jìn)，最后把他們合并起來耐亏，保存為build/app.js徊都，整個(gè)過程如下圖所示： 如果你對(duì)Grunt 足夠熟悉，就會(huì)注意到广辰，Gulp和Grunt的工作方式很不一樣暇矫。Grunt不使用數(shù)據(jù)流，而是使用文件择吊，對(duì)文件執(zhí)行單個(gè)任務(wù)然后保存到新的文件中李根，每個(gè)任務(wù)都會(huì)重復(fù)執(zhí)行所有進(jìn)程，文件系統(tǒng)頻繁的處理任務(wù)會(huì)導(dǎo)致Grunt的運(yùn)行速度比Gulp慢干发。如果想要獲取更加全面的數(shù)據(jù)流知識(shí)朱巨，請(qǐng)查看“Stream Handbook”.GULP.SRC()gulp.src()方法輸入一個(gè)glob(比如匹配一個(gè)或多個(gè)文件的字符串)或者glob數(shù)組，然后返回一個(gè)可以傳遞給插件的數(shù)據(jù)流枉长。Gulp使用node-glob來從你指定的glob里面獲取文件冀续，這里列舉下面的例子來闡述，方便大家理解：js/app.js 精確匹配文件js/*.js 僅匹配js目錄下的所有后綴為.js的文件js/*/.js 匹配js目錄及其子目錄下所有后綴為.js的文件!js/app.js 從匹配結(jié)果中排除js/app.js必峰，這種方法在你想要匹配除了特殊文件之外的所有文件時(shí)非常管用*.+(js|css) 匹配根目錄下所有后綴為.js或者.css的文件此外洪唐，Gulp也有很多其他的特征，但并不常用吼蚁。如果你想了解更多的特征凭需，請(qǐng)查看Minimatch文檔。js目錄下包含了壓縮和未壓縮的JavaScript文件肝匆，現(xiàn)在我們想要?jiǎng)?chuàng)建一個(gè)任務(wù)來壓縮還沒有被壓縮的文件粒蜈，我們需要先匹配目錄下所有的JavaScript文件，然后排除后綴為.min.js的文件:gulp.src(['js/**/*.js', '!js/**/*.min.js'])DEFINING TASKSgulp.task()函數(shù)通常會(huì)被用來定義任務(wù)旗国。當(dāng)你定義一個(gè)簡(jiǎn)單的任務(wù)時(shí)枯怖，需要傳入任務(wù)名字和執(zhí)行函數(shù)兩個(gè)屬性。gulp.task('greet', function () { ? console.log('Hello world!');});執(zhí)行g(shù)ulp greet的結(jié)果就是在控制臺(tái)上打印出“Hello world”.一個(gè)任務(wù)有時(shí)也可以是一系列任務(wù)能曾。假設(shè)要定義一個(gè)任務(wù)build來執(zhí)行css度硝、js、imgs這三個(gè)任務(wù)寿冕，我們可以通過指定一個(gè)任務(wù)數(shù)組而不是函數(shù)來完成蕊程。gulp.task('build', ['css', 'js', 'imgs']);這些任務(wù)不是同時(shí)進(jìn)行的，所以你不能認(rèn)為在js任務(wù)開始的時(shí)候css任務(wù)已經(jīng)結(jié)束了驼唱，也可能還沒有結(jié)束藻茂。為了確保一個(gè)任務(wù)在另一個(gè)任務(wù)執(zhí)行前已經(jīng)結(jié)束，可以將函數(shù)和任務(wù)數(shù)組結(jié)合起來指定其依賴關(guān)系。例如捌治，定義一個(gè)css任務(wù)岗钩，在執(zhí)行前需要檢查greet任務(wù)是否已經(jīng)執(zhí)行完畢，這樣做就是可行的:gulp.task('css', ['greet'], function () { ? // Deal with CSS here});現(xiàn)在肖油，當(dāng)執(zhí)行css任務(wù)時(shí)，Gulp會(huì)先執(zhí)行g(shù)reet任務(wù)臂港，然后在它結(jié)束后再調(diào)用你定義的函數(shù)森枪。DEFAULT TASKS你可以定義一個(gè)在gulp開始運(yùn)行時(shí)候默認(rèn)執(zhí)行的任務(wù)，并將這個(gè)任務(wù)命名為“default”：gulp.task('default', function () { ? // Your default task});PLUGINSGulp上有超過600種插件供你選擇审孽，你可以在插件頁(yè)面或者npm上搜索gulpplugin來瀏覽插件列表县袱。有些擁有“gulpfriendly”標(biāo)簽的插件，他們不能算插件佑力，但是能在Gulp上正常運(yùn)行式散。 需要注意的是，當(dāng)直接在npm里搜索時(shí)打颤，你無法知道某一插件是否在黑名單上（你需要滾動(dòng)到插件頁(yè)面底部才能看到）暴拄。大多數(shù)插件的使用都很方便，它們都配有詳細(xì)的文檔编饺，而且調(diào)用方法也相同（通過傳遞文件對(duì)象流給它）乖篷，它們通常會(huì)對(duì)這些文件進(jìn)行修改（但是有一些插件例外，比如validators）透且，最后返回新的文件給下一個(gè)插件撕蔼。讓我們用前面的js任務(wù)來詳細(xì)說明一下：var gulp = require('gulp'), ? ?jshint = require('gulp-jshint'), ? ?uglify = require('gulp-uglify'), ? ?concat = require('gulp-concat');gulp.task('js', function () { ? return gulp.src('js/*.js') ? ? ?.pipe(jshint()) ? ? ?.pipe(jshint.reporter('default')) ? ? ?.pipe(uglify()) ? ? ?.pipe(concat('app.js')) ? ? ?.pipe(gulp.dest('build'));});這里使用了三個(gè)插件，gulp-jshint,gulp-uglify和gulp-concat秽誊。開發(fā)者可以參考插件的README文檔鲸沮，插件有很多配置選項(xiàng)，而且給定的初始值通常能滿足需求锅论。細(xì)心的讀者可能會(huì)發(fā)現(xiàn)讼溺，程序中JSHint插件執(zhí)行了2次，這是因?yàn)榈谝淮螆?zhí)行JSHint只是給文件對(duì)象附加了jshint屬性棍厌，并沒有輸出肾胯。你可以自己讀取jshint的屬性或者傳遞給默認(rèn)的JSHint的接收函數(shù)或者其他的接收函數(shù),比如jshint-stylish.其他兩個(gè)插件的作用很清楚：uglify()函數(shù)壓縮代碼，concat(‘a(chǎn)pp.js’)函數(shù)將所有文件合并到一個(gè)叫app.js的文件中耘纱。GULP-LOAD-PLUGINS我發(fā)現(xiàn)gulp-load-plugin模塊十分有用敬肚，它能夠自動(dòng)地從package.json中加載任意Gulp插件然后把它們附加到一個(gè)對(duì)象上。它的基本用法如下所示：var gulpLoadPlugins = require('gulp-load-plugins'), ? ?plugins = gulpLoadPlugins();你可以把所有代碼寫到一行束析，但是我并不推薦這樣做艳馒。在執(zhí)行那些代碼之后，插件對(duì)象就已經(jīng)包含了插件，并使用“駝峰式”的方式進(jìn)行命名（例如弄慰，gulp-ruby-sass將被加載成plugins.rubySass）第美，這樣就可以很方便地使用了。例如陆爽，前面的js任務(wù)簡(jiǎn)化為如下：var gulp = require('gulp'), ? ?gulpLoadPlugins = require('gulp-load-plugins'), ? ?plugins = gulpLoadPlugins();gulp.task('js', function () { ? return gulp.src('js/*.js') ? ? ?.pipe(plugins.jshint()) ? ? ?.pipe(plugins.jshint.reporter('default')) ? ? ?.pipe(plugins.uglify()) ? ? ?.pipe(plugins.concat('app.js')) ? ? ?.pipe(gulp.dest('build'));});假設(shè)package.json文件如下面所示：{ ? "devDependencies": { ? ? ?"gulp-concat": "~2.2.0", ? ? ?"gulp-uglify": "~0.2.1", ? ? ?"gulp-jshint": "~1.5.1", ? ? ?"gulp": "~3.5.6" ? }}這個(gè)例子雖然已經(jīng)夠短了什往，但是使用更長(zhǎng)更復(fù)雜的Gulp文件會(huì)把它們簡(jiǎn)化成一兩行代碼。三月初發(fā)布的Gulp-load-plugins0.4.0版本添加了延遲加載功能慌闭，提高了插件的性能别威，因?yàn)椴寮谑褂玫臅r(shí)候才會(huì)被加載進(jìn)來，你不用擔(dān)心package.json里未被使用的插件影響性能（但是你需要把他們清理掉）驴剔。換句話說省古，如果你在執(zhí)行任務(wù)時(shí)只需要兩個(gè)插件，那么其他不相關(guān)的插件就不會(huì)被加載丧失。WATCHING FILESGulp可以監(jiān)聽文件的修改動(dòng)態(tài)豺妓，然后在文件被改動(dòng)的時(shí)候執(zhí)行一個(gè)或多個(gè)任務(wù)。這個(gè)特性十分有用（對(duì)我來說布讹，這可能是Gulp中最有用的一個(gè)功能）琳拭。你可以保存LESS文件，接著Gulp會(huì)自動(dòng)把它轉(zhuǎn)換為CSS文件并更新瀏覽器炒事。使用gulp.watch()方法可以監(jiān)聽文件臀栈，它接受一個(gè)glob或者glob數(shù)組（和gulp.src()一樣）以及一個(gè)任務(wù)數(shù)組來執(zhí)行回調(diào)。讓我們看看下面挠乳，build任務(wù)可以將模板轉(zhuǎn)換成html格式权薯，然后我們希望定義一個(gè)watch任務(wù)來監(jiān)聽模板文件的變化，并將這些模板轉(zhuǎn)換成html格式睡扬。watch函數(shù)的使用方法如下所示：gulp.task('watch', function () { ? gulp.watch('templates/*.tmpl.html', ['build']);});現(xiàn)在盟蚣，當(dāng)改變一個(gè)模板文件時(shí)，build任務(wù)會(huì)被執(zhí)行并生成HTML文件卖怜，也可以給watch函數(shù)一個(gè)回調(diào)函數(shù)屎开，而不是一個(gè)任務(wù)數(shù)組。在這個(gè)示例中马靠，回調(diào)函數(shù)有一個(gè)包含觸發(fā)回調(diào)函數(shù)信息的event對(duì)象：gulp.watch('templates/*.tmpl.html', function (event) { ? console.log('Event type: ' + event.type); // added, changed, or deleted ? console.log('Event path: ' + event.path); // The path of the modified file});Gulp.watch()的另一個(gè)非常好的特性是返回我們熟知的watcher奄抽。利用watcher來監(jiān)聽額外的事件或者向watch中添加文件。例如甩鳄，在執(zhí)行一系列任務(wù)和調(diào)用一個(gè)函數(shù)時(shí)逞度，你就可以在返回的watcher中添加監(jiān)聽change事件:var watcher = gulp.watch('templates/*.tmpl.html', ['build']);watcher.on('change', function (event) { ? console.log('Event type: ' + event.type); // added, changed, or deleted ? console.log('Event path: ' + event.path); // The path of the modified file});除了change事件，還可以監(jiān)聽很多其他的事件:end 在watcher結(jié)束時(shí)觸發(fā)（這意味著妙啃，在文件改變的時(shí)候档泽，任務(wù)或者回調(diào)不會(huì)執(zhí)行）error 在出現(xiàn)error時(shí)觸發(fā)ready 在文件被找到并正被監(jiān)聽時(shí)觸發(fā)nomatch 在glob沒有匹配到任何文件時(shí)觸發(fā)Watcher對(duì)象也包含了一些可以調(diào)用的方法：watcher.end() 停止watcher（以便停止執(zhí)行后面的任務(wù)或者回調(diào)函數(shù)）watcher.files() 返回watcher監(jiān)聽的文件列表watcher.add(glob) 將與指定glob相匹配的文件添加到watcher（也接受可選的回調(diào)當(dāng)?shù)诙€(gè)參數(shù)）watcher.remove(filepath) 從watcher中移除個(gè)別文件Reloading Changes In The Browser當(dāng)一個(gè)文件被修改或者Gulp任務(wù)被執(zhí)行時(shí)可以用Gulp來加載或者更新網(wǎng)頁(yè)俊戳。LiveReload和BrowserSync插件就可以用來實(shí)現(xiàn)在游覽器中加載更新的內(nèi)容。LIVERELOADLiveReload結(jié)合了瀏覽器擴(kuò)展（包括Chrome extension）馆匿，在發(fā)現(xiàn)文件被修改時(shí)會(huì)實(shí)時(shí)更新網(wǎng)頁(yè)抑胎。它可以和gulp-watch插件或者前面描述的gulp-watch()函數(shù)一起使用。下面有一個(gè)gulp-livereload倉(cāng)庫(kù)中的README文件提到的例子:var gulp = require('gulp'), ? ?less = require('gulp-less'), ? ?livereload = require('gulp-livereload'), ? ?watch = require('gulp-watch');gulp.task('less', function() { ? gulp.src('less/*.less') ? ? ?.pipe(watch()) ? ? ?.pipe(less()) ? ? ?.pipe(gulp.dest('css')) ? ? ?.pipe(livereload());});這會(huì)監(jiān)聽到所有與less/*.less相匹配的文件的變化渐北。一旦監(jiān)測(cè)到變化阿逃，就會(huì)生成css并保存，然后重新加載網(wǎng)頁(yè).BROWSERSYNCBroserSync在瀏覽器中展示變化的功能與LiveReload非常相似腔稀，但是它有更多的功能盆昙。當(dāng)你改變代碼的時(shí)候，BrowserSync會(huì)重新加載頁(yè)面焊虏，或者如果是css文件，會(huì)直接添加進(jìn)css中秕磷，頁(yè)面并不需要再次刷新诵闭。這項(xiàng)功能在網(wǎng)站是禁止刷新的時(shí)候是很有用的。假設(shè)你正在開發(fā)單頁(yè)應(yīng)用的第4頁(yè)澎嚣，刷新頁(yè)面就會(huì)導(dǎo)致你回到開始頁(yè)疏尿。使用LiveReload的話，你就需要在每次改變代碼之后還需要點(diǎn)擊四次易桃，而當(dāng)你修改CSS時(shí)褥琐，插入一些變化時(shí)，BrowserSync會(huì)直接將需要修改的地方添加進(jìn)CSS晤郑，就不用再點(diǎn)擊回退敌呈。BrowserSync提供了一種在多個(gè)瀏覽器里測(cè)試網(wǎng)頁(yè)的很好方式（查看大圖）。BrowserSync也可以在不同瀏覽器之間同步點(diǎn)擊翻頁(yè)造寝、表單操作磕洪、滾動(dòng)位置。你可以在電腦和iPhone上打開不同的瀏覽器然后進(jìn)行操作诫龙。所有設(shè)備上的鏈接將會(huì)隨之變化析显，當(dāng)你向下滾動(dòng)頁(yè)面時(shí)，所有設(shè)備上頁(yè)面都會(huì)向下滾動(dòng)（通常還很流暢Ｇ┰摺）谷异。當(dāng)你在表單中輸入文本時(shí)，每個(gè)窗口都會(huì)有輸入锦聊。當(dāng)你不想要這種行為時(shí)歹嘹，也可以把這個(gè)功能關(guān)閉。BrowserSync不需要使用瀏覽器插件括丁，因?yàn)樗旧砭涂梢越o你提供文件荞下。（查看大圖）BrowserSync不需要使用瀏覽器插件，因?yàn)樗旧砭涂梢詾槟闾峁┪募?wù)（如果文件是動(dòng)態(tài)的，則為他們提供代理服務(wù)）和用來開啟瀏覽器和服務(wù)器之間的socket的腳本服務(wù)尖昏。到目前為止這個(gè)功能的使用都十分順暢仰税。實(shí)際上BrowserSync對(duì)于Gulp并不算一種插件，因?yàn)锽rowserSync并不像一個(gè)插件一樣操作文件抽诉。然而陨簇，npm上的BrowserSync模塊能在Gulp上被直接調(diào)用。首先迹淌，需要通過npm安裝一下：npm install --save-dev browser-sync然后gulpfile.js會(huì)啟動(dòng)BrowserSync并監(jiān)聽文件：var gulp = require('gulp'), ? ?browserSync = require('browser-sync');gulp.task('browser-sync', function () { ? var files = [ ? ? ?'app/**/*.html', ? ? ?'app/assets/css/**/*.css', ? ? ?'app/assets/imgs/**/*.png', ? ? ?'app/assets/js/**/*.js' ? ]; ? browserSync.init(files, { ? ? ?server: { ? ? ? ? baseDir: './app' ? ? ?} ? });});執(zhí)行g(shù)ulp browser-sync后會(huì)監(jiān)聽匹配文件的變化河绽，同時(shí)為app目錄提供文件服務(wù)。此外BrowserSync的開發(fā)者還寫了很多關(guān)于BrowserSync+Gulp倉(cāng)庫(kù)的其他用途唉窃。Why Gulp?前面提到過耙饰，Gulp是為數(shù)不多的使用JavaScript開發(fā)的構(gòu)建工具之一，也有其他不是用JavaScript開發(fā)的構(gòu)建工具纹份，比如Rake苟跪，那么我們?yōu)槭裁匆x擇Gulp呢?目前最流行的兩種使用JavaScript開發(fā)的構(gòu)建工具是Grunt和Gulp。Grunt在2013年非常流行蔓涧，因?yàn)樗鼜氐赘淖兞嗽S多人開發(fā)網(wǎng)站的方式件已，它有上千種插件可供用戶使用，從linting元暴、壓縮篷扩、合并代碼到使用Bower安裝程序包,啟動(dòng)Express服務(wù)都能辦到。這些和Gulp的很不一樣茉盏，Gulp只有執(zhí)行單個(gè)小任務(wù)來處理文件的插件鉴未，因?yàn)槿蝿?wù)都是JavaScript（和Grunt使用的大型對(duì)象不同），根本不需要插件援岩，你只需用傳統(tǒng)方法啟動(dòng)一個(gè)Express服務(wù)就可以了歼狼。Grunt任務(wù)擁有大量的配置，會(huì)引用大量你實(shí)際上并不需要的對(duì)象屬性享怀，但是Gulp里同樣的任務(wù)也許只有幾行羽峰。讓我們看個(gè)簡(jiǎn)單的Gruntfile.js，它規(guī)定一個(gè)將LESS轉(zhuǎn)換為CSS的任務(wù)添瓷，然后執(zhí)行Autoprefixer:grunt.initConfig({ ? less: { ? ? ?development: { ? ? ? ? files: { ? ? ? ? ? ?"build/tmp/app.css": "assets/app.less" ? ? ? ? } ? ? ?} ? }, ? autoprefixer: { ? ? ?options: { ? ? ? ? browsers: ['last 2 version', 'ie 8', 'ie 9'] ? ? ?}, ? ? ?multiple_files: { ? ? ? ? expand: true, ? ? ? ? flatten: true, ? ? ? ? src: 'build/tmp/app.css', ? ? ? ? dest: 'build/' ? ? ?} ? }});grunt.loadNpmTasks('grunt-contrib-less');grunt.loadNpmTasks('grunt-autoprefixer');grunt.registerTask('css', ['less', 'autoprefixer']);與Gulpfile.js文件進(jìn)行對(duì)比梅屉，它們執(zhí)行的任務(wù)相同：var gulp = require('gulp'), ? less = require('gulp-less'), ? autoprefix = require('gulp-autoprefixer');gulp.task('css', function () { ? gulp.src('assets/app.less') ? ? ?.pipe(less()) ? ? ?.pipe(autoprefix('last 2 version', 'ie 8', 'ie 9')) ? ? ?.pipe(gulp.dest('build'));});因?yàn)镚runt比Gulp更加頻繁地操作文件系統(tǒng)，所以使用數(shù)據(jù)流的Gulp總是比Grunt快鳞贷。對(duì)于一個(gè)小的LESS文件坯汤，gulpfile.js通常需要6ms，而gruntfile.js則需要大概50ms——慢8倍多搀愧。這只是個(gè)簡(jiǎn)單的例子惰聂，對(duì)于長(zhǎng)的文件疆偿，這個(gè)數(shù)字會(huì)增加得更顯著