Gulp自動化構建工具

gulp自動化構建工具，實時監控、代碼合並、壓縮...

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

第一步：安裝Node

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

第二步：使用命令行

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

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

為了確保Node已經正確安裝，我們執行幾個簡單的命令。

node -v

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

npm -v

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

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

第三步：定位到項目

找到你的文件夾打開它，按住shift+鼠標右鍵 ，選擇“在此處打開命令窗口”，當然也可以是命令cd  定位文件夾

第四步：安裝gulp

我們已經知道如何使用命令行，現在嘗試點新的東西，認識npm然後安裝gulp。

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

sudo npm install -g gulp   // 等同於 npm install --global gulp

1. sudo是以管理員身份執行命令，一般會要求輸入電腦密碼，可以省略sudo

2. npm是安裝node模塊的工具，執行install命令

3. -g表示在全局環境安裝，以便任何項目都能使用它

4. 最後，gulp是將要安裝的node模塊的名字

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

gulp -v

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

npm install —-save-dev gulp

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

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

第五步：新建Gulpfile文件，運行gulp

安裝好gulp後我們需要告訴它要為我們執行哪些任務，首先，我們自己需要弄清楚項目需要哪些任務。

• 檢查Javascript
• 編譯Sass（或Less之類的）文件
• 合並Javascript
• 壓縮並重命名合並後的Javascript

安裝依賴

　npm init       一路enter ，會在當前目錄生成一個package.json文件夾（模塊的配置文件）

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

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

--save-dev  ：你安裝的包會出現在你開發(dev)的依賴(Dependencies)裡

　　因為gulp只是我們開發階段所依賴的東西，並不是我們項目所用的功能性的東西，所以放在開發的依賴項裡面

新建gulpfile文件

現在，組件都安裝完畢，我們需要新建gulpfile文件以指定gulp需要為我們完成什麼任務。

 　　gulp.task(name,fn)      - 定義任務，第一個參數是任務名，第二個參數是任務內容。

　 　gulp.src(path)　　　　  - 選擇文件，傳入參數是文件路徑。

 　   pipe()                        - 管道，你可以暫時將 pipe 理解為將操作加入執行隊列

 　　gulp.dest(path)           - 輸出文件

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

gulpfile.js

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

// 引入組件
var jshint = require('gulp-jshint');    // js檢查
var sass = require('gulp-sass');　　　  // sass自動化
var concat = require('gulp-concat');　　//文件合並
var uglify = require('gulp-uglify');　　//js混淆
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())　　　　　　　 //js 壓縮
        .pipe(gulp.dest('./dist'));  //輸出
});

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

    // 監聽文件變化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts');
    });
});
//最後的 監聽還可以更簡單的寫
　gulp.task('default',function(){
　　　　gulp.watch('./js/*.js',['lint']);
　　　  gulp.watch('./scss/*.scss',['sass']);
　　　　gulp.watch('./js/*.js',['script']);

});
//如果不監聽 
　　
　　gulp.task('default',['lint','sass','script'])

現在，分段解釋下這段代碼。

引入組件

var gulp = require('gulp'); 

var jshint = require('gulp-jshint'); //js 代碼檢查，gulp-jslint 也可以
var sass = require('gulp-sass');　　 //sass 自動編譯
var less = require('gulp-less');     //less 自動編譯
var minifyCss = require('gulp-minify-css'); //css壓縮
var concat = require('gulp-concat'); // 代碼合並
var uglify = require('gulp-uglify'); // js 混淆 、壓縮
var rename = require('gulp-rename'); // 重命名

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

Lint任務

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

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

Sass任務

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

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

Scripts 任務

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'));
});

注意:當遇到js 壓縮出錯，uglify.js ，使用下面方法

　　.pipe(uglify().on('error',function(e){ 　　　　console.log(e) 　　}))

合並後的文件 第544行有問題

scripts任務會合並 js/ 目錄下得所有得js文件並輸出到 dist/ 目錄，然後gulp會重命名、壓縮合並的文件，也輸出到 dist/ 目錄。

default任務

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

這時，我們創建了一個基於其他任務的default任務。使用 .run() 方法關聯和運行我們上面定義的任務，使用 .watch() 方法去監聽指定目錄的文件變化，當有文件變化時，會運行回調定義的其他任務。

現在，回到命令行，可以直接運行gulp任務了。