摘要：本文假設(shè)你之前沒有用過任何任務(wù)腳本和命令行工具，一步步教你上手。如果這兩行命令沒有得到返回，可能就沒有安裝正確，嘗試重啟下命令行工具，如果還不行的話，只能回到第一步進行重裝。

本文假設(shè)你之前沒有用過任何任務(wù)腳本（task runner）和命令行工具，一步步教你上手Gulp。不要怕，它其實很簡單，我會分為五步向你介紹gulp并幫助你完成一些驚人的事情。那就直接開始吧。

首先，最基本也最重要的是，我們需要搭建node環(huán)境。訪問http://nodejs.org，然后點擊大大的綠色的install按鈕，下載完成后直接運行程序，就一切準備就緒。npm會隨著安裝包一起安裝，稍后會用到它。

也許現(xiàn)在你還不是很了解什么是命令行——OSX中的終端（Terminal），windows中的命令提示符（Command Prompt），但很快你就會知道。它看起來沒那么簡單，但一旦掌握了它的竅門，就可以很方便的執(zhí)行很多命令行程序，比如Sass，Yeoman和Git等，這些都是非常有用的工具。

  
如果你很熟悉命令行，直接跳到步驟四。

為了確保Node已經(jīng)正確安裝，我們執(zhí)行幾個簡單的命令。

node -v

回車（Enter），如果正確安裝的話，你會看到所安裝的Node的版本號，接下來看看npm。

npm -v

這同樣能得到npm的版本號。

如果這兩行命令沒有得到返回，可能node就沒有安裝正確，嘗試重啟下命令行工具，如果還不行的話，只能回到第一步進行重裝。

現(xiàn)在，我們已經(jīng)大致了解了命令行并且知道如何簡單使用它，接下來只需要兩個簡單的命令就能定位到文件目錄并看看目錄里都有些什么文件。

cd，定位到目錄

ls，列出文件列表

  
建議多敲敲這兩個命令，了解文件系統(tǒng)并知道文件都在哪里。

習慣使用了這兩個命令后，就要進入我們的項目目錄，這個目錄各不相同，舉個例子，這是我進入我項目目錄的命令：

cd /Applications/XAMPP/xamppfiles/htdocs/my-project

成功進入項目目錄后，我們開始安裝gulp。

我們已經(jīng)知道如何使用命令行，現(xiàn)在嘗試點新的東西，認識npm然后安裝gulp。

NPM是基于命令行的node包管理工具，它可以將node的程序模塊安裝到項目中，在它的官網(wǎng)中可以查看和搜索所有可用的程序模塊。

在命令行中輸入

sudo npm install -g gulp 

sudo是以管理員身份執(zhí)行命令，一般會要求輸入電腦密碼

npm是安裝node模塊的工具，執(zhí)行install命令

-g表示在全局環(huán)境安裝，以便任何項目都能使用它

最后，gulp是將要安裝的node模塊的名字

運行時注意查看命令行有沒有錯誤信息，安裝完成后，你可以使用下面的命令查看gulp的版本號以確保gulp已經(jīng)被正確安裝。

gulp -v

接下來，我們需要將gulp安裝到項目本地

npm install —-save-dev gulp

這里，我們使用—-save-dev來更新package.json文件，更新devDependencies值，以表明項目需要依賴gulp。

Dependencies可以向其他參與項目的人指明項目在開發(fā)環(huán)境和生產(chǎn)環(huán)境中的node模塊依懶關(guān)系，想要更加深入的了解它可以看看package.json文檔。

安裝好gulp后我們需要告訴它要為我們執(zhí)行哪些任務(wù)，首先，我們自己需要弄清楚項目需要哪些任務(wù)。

檢查Javascript

編譯Sass（或Less之類的）文件

合并Javascript

壓縮并重命名合并后的Javascript

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

  
提醒下，如果以上命令提示權(quán)限錯誤，需要添加sudo再次嘗試。

現(xiàn)在，組件都安裝完畢，我們需要新建gulpfile文件以指定gulp需要為我們完成什么任務(wù)。

gulp只有五個方法： task，run，watch，src，和dest，在項目根目錄新建一個js文件并命名為gulpfile.js，把下面的代碼粘貼進去：

gulpfile.js

// 引入 gulp
var gulp = require("gulp"); 

// 引入組件
var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");

// 檢查腳本
gulp.task("lint", function() {
    gulp.src("./js/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter("default"));
});

// 編譯Sass
gulp.task("sass", function() {
    gulp.src("./scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});

// 合并，壓縮文件
gulp.task("scripts", function() {
    gulp.src("./js/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("./dist"))
        .pipe(rename("all.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("./dist"));
});

// 默認任務(wù)
gulp.task("default", function(){
    gulp.run("lint", "sass", "scripts");

    // 監(jiān)聽文件變化
    gulp.watch("./js/*.js", function(){
        gulp.run("lint", "sass", "scripts");
    });
});

現(xiàn)在，分段解釋下這段代碼。

var gulp = require("gulp"); 

var jshint = require("gulp-jshint");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");

這一步，我們引入了核心的gulp和其他依賴組件，接下來，分開創(chuàng)建lint, sass, scripts 和 default這四個不同的任務(wù)。

gulp.task("lint", function() {
    gulp.src("./js/*.js")
        .pipe(jshint())
        .pipe(jshint.reporter("default"));
});

Link任務(wù)會檢查js/目錄下得js文件有沒有報錯或警告。

gulp.task("sass", function() {
    gulp.src("./scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("./css"));
});

Sass任務(wù)會編譯scss/目錄下的scss文件，并把編譯完成的css文件保存到/css目錄中。

gulp.task("scripts", function() {
    gulp.src("./js/*.js")
        .pipe(concat("all.js"))
        .pipe(gulp.dest("./dist"))
        .pipe(rename("all.min.js"))
        .pipe(uglify())
        .pipe(gulp.dest("./dist"));
});

scripts任務(wù)會合并js/目錄下得所有得js文件并輸出到dist/目錄，然后gulp會重命名、壓縮合并的文件，也輸出到dist/目錄。

gulp.task("default", function(){
    gulp.run("lint", "sass", "scripts");
    gulp.watch("./js/*.js", function(){
        gulp.run("lint", "sass", "scripts");
    });
});

這時，我們創(chuàng)建了一個基于其他任務(wù)的default任務(wù)。使用.run()方法關(guān)聯(lián)和運行我們上面定義的任務(wù)，使用.watch()方法去監(jiān)聽指定目錄的文件變化，當有文件變化時，會運行回調(diào)定義的其他任務(wù)。

現(xiàn)在，回到命令行，可以直接運行g(shù)ulp任務(wù)了。

gulp

這將執(zhí)行定義的default任務(wù)，換言之，這和以下的命令式同一個意思

gulp default

當然，我們可以運行在gulpfile.js中定義的任意任務(wù)，比如，現(xiàn)在運行sass任務(wù)：

gulp sass

(Kimi: 哇塞，酷比了哎~)

現(xiàn)在已經(jīng)做到了設(shè)置gulp任務(wù)然后運行他們，現(xiàn)在再回顧下之前學習的。

學習了安裝Node環(huán)境

學習了簡單使用命令行

學習了用命令行進入項目目錄

學習了使用npm和安裝gulp

學習了如何運行g(shù)ulp任務(wù)

另外，有一些參考資源供進一步學習：

npm上得gulp組件

gulp的Github主頁

官方package.json文檔

本文譯自http://travismaynard.com/writing/getting-started-with-gulp