概述

在軟件開(kāi)發(fā)中，任務(wù)運(yùn)行器的好處是不言而喻的。它們可以幫助自動(dòng)運(yùn)行常見(jiàn)的冗長(zhǎng)的任務(wù)，讓你可以專(zhuān)注于更重要的事情中，比如敲出很棒的代碼。說(shuō)的嚴(yán)肅點(diǎn)，自動(dòng)運(yùn)行一些比如圖片壓縮、代碼壓縮、單元測(cè)試以及更多的任務(wù)的技能，簡(jiǎn)直就是節(jié)省時(shí)間的利器。

對(duì)于很多前端開(kāi)發(fā)者而言，時(shí)下使用最多的任務(wù)管理器就是Grunt了，一個(gè)可以讓你在Gruntfile.js文件中使用JavaScript定義各種運(yùn)行任務(wù)的工具?；旧?，只要你了解JavaScript，創(chuàng)建一個(gè)Grunt任務(wù)是非常簡(jiǎn)單直接的事情。豐富的第三方插件比如jsHint,Sass還有Uglify等等，讓Grunt成為最易擴(kuò)展的工具之一。

對(duì)于多數(shù)人來(lái)講，一直以來(lái)都選擇Grunt作為任務(wù)運(yùn)行器。不過(guò)最近，因?yàn)橐子诎惭b，擁有更加易讀和管理的超級(jí)簡(jiǎn)單的配置文件，一個(gè)叫Gulp.js的工具吸引了大批人的眼球。

安裝Gulp.js

Gulp.js跟Grunt一樣，都是基于Node的任務(wù)運(yùn)行工具。所以你必須安裝Node來(lái)運(yùn)行它。有幾種不同的方法可以安裝Gulp，取決于你的操作系統(tǒng)。在OS X中，我用nvm，這是TimCaswell寫(xiě)的用于管理多個(gè)Node.js版本的很不錯(cuò)的腳本工具。你也可以直接從Node.js官方網(wǎng)站下載二進(jìn)制文件。如果你對(duì)Node還一無(wú)所知的話，那我建議你最好去Nettuts+series先熟悉一下Node.js。

我們可以用npm（Node包管理器）來(lái)快速安裝Gulp。打開(kāi)你的終端然后輸入:

npm install -g gulp

這條指令，從npm的注冊(cè)機(jī)制中獲取gulp并全局安裝到你的系統(tǒng)中，以便你可以直接在命令行中訪問(wèn)它。

安裝好了gulp，下面我們開(kāi)始在項(xiàng)目中來(lái)使用它。

使用Gulp.js創(chuàng)建你的項(xiàng)目

要在項(xiàng)目中使用Gulp，必須完成下面關(guān)鍵幾點(diǎn)：

• 安裝兩個(gè)依賴包
• 安裝任何你想使用的插件
• 創(chuàng)建Gulp.js文件然后定義你打算運(yùn)行的任務(wù)

請(qǐng)?jiān)陧?xiàng)目的路徑下完成以上幾點(diǎn)，這樣Gulp才能使用你的配置文件。

首先，安裝依賴包：

npm install --save-dev gulp gulp-util

現(xiàn)在我們需要安裝在配置文件中定義好的用來(lái)運(yùn)行指定任務(wù)的Gulp插件。這些插件都是Node包，所以我們?cè)俅问褂胣pm來(lái)安裝它們。

npm install --save-dev gulp-uglify gulp-concat

我這里安裝兩個(gè)插件，讓我可以使用Uglify.js壓縮器來(lái)精簡(jiǎn)/壓縮JavaScript代碼并且將多個(gè)JS文件合并到一個(gè)文件中去。

注意，我這里用的—save-dev，這個(gè)指令讓我只在當(dāng)前項(xiàng)目中安裝Gulp依賴包跟插件。這么做可以在package.json中的devDependencies列表中為每個(gè)依賴項(xiàng)生成對(duì)應(yīng)的詞條標(biāo)識(shí)。就像下面展示的：

{
  "devDependencies": {
    "gulp-util": "~2.2.13",
    "gulp": "~3.5.0",
    "gulp-uglify": "~0.2.0",
    "gulp-concat": "~2.1.7"
  }
}

這樣可以確保使用npm為項(xiàng)目安裝任何依賴包和插件。如果在項(xiàng)目中沒(méi)有package.json文件，那在命令行輸入npm init或者干脆在編輯器中手動(dòng)創(chuàng)建一個(gè)，寫(xiě)好對(duì)應(yīng)的卷括號(hào)，然后保存命名為”package.json”。在命令行中輸入npm指令來(lái)更新它。請(qǐng)注意，必須要使用卷括號(hào)，不然，當(dāng)你試圖使用—save-dev時(shí)，npm會(huì)拋出一個(gè)錯(cuò)誤顯示它不是一個(gè)合法的JSON文件。

雖然在本篇指南中我只用了兩個(gè)插件，不過(guò)Gulp提供了超過(guò)200個(gè)插件來(lái)滿足不同的功能需求，包括：

• LiveReload(gulp-livereload)
• JSHint(gulp-jshint)
• Sass(gulp-sass)
• CoffeeScript file compilation(gulp-coffee)

還有好多好多···

Gulpfile.js文件

跟Grunt一樣，Gulp有一個(gè)叫做gulpfile.js的同名配置文件，里面定義了運(yùn)行任務(wù)的所有的必須的插件。你要在項(xiàng)目的根目錄下創(chuàng)建這個(gè)文件。

簡(jiǎn)單直白的語(yǔ)法，讓gulp文件非常易讀能懂：

var gulp    = require('gulp'),
gutil    = require('gulp-util'),
uglify  = require('gulp-uglify'),
concat  = require('gulp-concat');

上面代碼簡(jiǎn)單告訴gulp需要引用哪些插件來(lái)完成既定的任務(wù)。

下一步，我們需要定義Gulp運(yùn)行的任務(wù)。我這里，定義兩個(gè)：

• 壓縮圖片
• 精簡(jiǎn)JS文件

我們使用Gulp的方法task()來(lái)定義要運(yùn)行的任務(wù)：

gulp.task('js', function () {
    gulp.src('./js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./js'));
});

看看上面的代碼，用的是引用的插件組成的一個(gè)混合方法調(diào)用。第一個(gè)方法task(),使用一個(gè)名稱代表當(dāng)前任務(wù)（這里就叫'js'），還有一個(gè)匿名方法囊括了實(shí)際的操作。我們來(lái)拆解一下代碼：

gulp.src('./js/*.js')

src()方法指定了要從哪里找到需要壓縮的JS文件，并且將其轉(zhuǎn)換成包含文檔結(jié)構(gòu)的數(shù)據(jù)流以傳入后續(xù)運(yùn)行的插件中。這是Node.jsStreams API中的一部分，也正是Gulp擁有簡(jiǎn)明API語(yǔ)法的原因之一。

.pipe(uglify())

pipe()方法從src()方法中獲得傳過(guò)來(lái)的數(shù)據(jù)流，然后傳入指定的插件中。在當(dāng)前例子中，插件uglify將接收數(shù)據(jù)流。

.pipe(concat('all.js'))

像uglify一樣，插件concat通過(guò)pipe()接收傳過(guò)來(lái)的數(shù)據(jù)流，然后將多個(gè)JS文件合并到'all.js'中。

.pipe(gulp.dest('./js'));

最后，使用Gulp的dest()方法，將all.js寫(xiě)到指定目錄中，整個(gè)過(guò)程簡(jiǎn)介易讀。

還有最后一個(gè)我們要做的事情，就是更改Gulp的默認(rèn)運(yùn)行任務(wù)為”js”。

gulp.task('default', function(){
    gulp.run('js'); 
});

返回到命令行，輸入'gulp'，Gulp找到了gulpfile.js文件，加載所有的依賴項(xiàng)跟插件，運(yùn)行默認(rèn)任務(wù)'js'。你可以在最后的運(yùn)行結(jié)果，文件被壓縮合并了

讓我們更近一步吧。Gulp提供了另外一個(gè)方法叫watch()，它可以監(jiān)視指定的資源變更。跟手動(dòng)輸入'gulp'運(yùn)行任務(wù)不同，這個(gè)方法允許根據(jù)資源的改變自動(dòng)運(yùn)行任務(wù)。

gulp.watch('./js/*', function () {
     gulp.run('js');
});

當(dāng)上面的代碼運(yùn)行的時(shí)候，Gulp會(huì)繼續(xù)保持對(duì)指定資源的監(jiān)視，一旦資源發(fā)生變更，就會(huì)再次運(yùn)行'js'方法。這個(gè)功能很棒！

向Gulp.js過(guò)渡

當(dāng)我剛聽(tīng)說(shuō)Gulp的時(shí)候，我第一反應(yīng)就是“又一個(gè)超棒的工具！”。Gulp.js確實(shí)擁有著吸引人的語(yǔ)法跟API，它讓構(gòu)建任務(wù)變得輕而易舉。盡管插件沒(méi)有Grunt豐富，但是它的插件庫(kù)看起來(lái)已經(jīng)在日趨增長(zhǎng)，特別是現(xiàn)在擁有著對(duì)它感興趣的這么多的開(kāi)發(fā)者。

以上就是詳解前端任務(wù)構(gòu)建利器Gulp.js使用指南的詳細(xì)內(nèi)容，更多關(guān)于Gulp.js使用指南的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論