詳解前端任務構建利器Gulp.js使用指南

概述

在軟件開發中,任務運行器的好處是不言而喻的。它們可以幫助自動運行常見的冗長的任務,讓你可以專註於更重要的事情中,比如敲出很棒的代碼。說的嚴肅點,自動運行一些比如圖片壓縮、代碼壓縮、單元測試以及更多的任務的技能,簡直就是節省時間的利器。

對於很多前端開發者而言,時下使用最多的任務管理器就是Grunt瞭,一個可以讓你在Gruntfile.js文件中使用JavaScript定義各種運行任務的工具。基本上,隻要你瞭解JavaScript,創建一個Grunt任務是非常簡單直接的事情。豐富的第三方插件比如jsHint,Sass還有Uglify等等,讓Grunt成為最易擴展的工具之一。

對於多數人來講,一直以來都選擇Grunt作為任務運行器。不過最近,因為易於安裝,擁有更加易讀和管理的超級簡單的配置文件,一個叫Gulp.js的工具吸引瞭大批人的眼球。

安裝Gulp.js

Gulp.js跟Grunt一樣,都是基於Node的任務運行工具。所以你必須安裝Node來運行它。有幾種不同的方法可以安裝Gulp,取決於你的操作系統。在OS X中,我用nvm,這是TimCaswell寫的用於管理多個Node.js版本的很不錯的腳本工具。你也可以直接從Node.js官方網站下載二進制文件。如果你對Node還一無所知的話,那我建議你最好去Nettuts+series先熟悉一下Node.js。

我們可以用npm(Node包管理器)來快速安裝Gulp。打開你的終端然後輸入:

npm install -g gulp

這條指令,從npm的註冊機制中獲取gulp並全局安裝到你的系統中,以便你可以直接在命令行中訪問它。

安裝好瞭gulp,下面我們開始在項目中來使用它。

使用Gulp.js創建你的項目

要在項目中使用Gulp,必須完成下面關鍵幾點:

  • 安裝兩個依賴包
  • 安裝任何你想使用的插件
  • 創建Gulp.js文件然後定義你打算運行的任務

請在項目的路徑下完成以上幾點,這樣Gulp才能使用你的配置文件。

首先,安裝依賴包:

npm install –save-dev gulp gulp-util

現在我們需要安裝在配置文件中定義好的用來運行指定任務的Gulp插件。這些插件都是Node包,所以我們再次使用npm來安裝它們。

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

我這裡安裝兩個插件,讓我可以使用Uglify.js壓縮器來精簡/壓縮JavaScript代碼並且將多個JS文件合並到一個文件中去。

註意,我這裡用的—save-dev,這個指令讓我隻在當前項目中安裝Gulp依賴包跟插件。這麼做可以在package.json中的devDependencies列表中為每個依賴項生成對應的詞條標識。就像下面展示的:

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

這樣可以確保使用npm為項目安裝任何依賴包和插件。如果在項目中沒有package.json文件,那在命令行輸入npm init或者幹脆在編輯器中手動創建一個,寫好對應的卷括號,然後保存命名為”package.json”。在命令行中輸入npm指令來更新它。請註意,必須要使用卷括號,不然,當你試圖使用—save-dev時,npm會拋出一個錯誤顯示它不是一個合法的JSON文件。

雖然在本篇指南中我隻用瞭兩個插件,不過Gulp提供瞭超過200個插件來滿足不同的功能需求,包括:

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

還有好多好多···

Gulpfile.js文件

跟Grunt一樣,Gulp有一個叫做gulpfile.js的同名配置文件,裡面定義瞭運行任務的所有的必須的插件。你要在項目的根目錄下創建這個文件。

簡單直白的語法,讓gulp文件非常易讀能懂:

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

上面代碼簡單告訴gulp需要引用哪些插件來完成既定的任務。

下一步,我們需要定義Gulp運行的任務。我這裡,定義兩個:

  • 壓縮圖片
  • 精簡JS文件

我們使用Gulp的方法task()來定義要運行的任務:

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

看看上面的代碼,用的是引用的插件組成的一個混合方法調用。第一個方法task(),使用一個名稱代表當前任務(這裡就叫’js’),還有一個匿名方法囊括瞭實際的操作。我們來拆解一下代碼:

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

src()方法指定瞭要從哪裡找到需要壓縮的JS文件,並且將其轉換成包含文檔結構的數據流以傳入後續運行的插件中。這是Node.jsStreams API中的一部分,也正是Gulp擁有簡明API語法的原因之一。

.pipe(uglify())

pipe()方法從src()方法中獲得傳過來的數據流,然後傳入指定的插件中。在當前例子中,插件uglify將接收數據流。

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

像uglify一樣,插件concat通過pipe()接收傳過來的數據流,然後將多個JS文件合並到’all.js’中。

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

最後,使用Gulp的dest()方法,將all.js寫到指定目錄中,整個過程簡介易讀。

還有最後一個我們要做的事情,就是更改Gulp的默認運行任務為”js”。

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

返回到命令行,輸入’gulp’,Gulp找到瞭gulpfile.js文件,加載所有的依賴項跟插件,運行默認任務’js’。你可以在最後的運行結果,文件被壓縮合並瞭

讓我們更近一步吧。Gulp提供瞭另外一個方法叫watch(),它可以監視指定的資源變更。跟手動輸入’gulp’運行任務不同,這個方法允許根據資源的改變自動運行任務。

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

當上面的代碼運行的時候,Gulp會繼續保持對指定資源的監視,一旦資源發生變更,就會再次運行’js’方法。這個功能很棒!

向Gulp.js過渡

當我剛聽說Gulp的時候,我第一反應就是“又一個超棒的工具!”。Gulp.js確實擁有著吸引人的語法跟API,它讓構建任務變得輕而易舉。盡管插件沒有Grunt豐富,但是它的插件庫看起來已經在日趨增長,特別是現在擁有著對它感興趣的這麼多的開發者。

以上就是詳解前端任務構建利器Gulp.js使用指南的詳細內容,更多關於Gulp.js使用指南的資料請關註WalkonNet其它相關文章!