Gulp、Grunt構建工具

在Gulp中建立一個庫從磁盤gulp.src讀取源文件並經過磁盤管道寫回內容到gulp.dest，能夠理解成只是將文件複製到另外一個目錄。

var gulp = require('gulp');
gulp.task('build', function () {
  return gulp
    .src('./sample.js')
    .pipe(gulp.dest('./build'));
});

複製文件完成了，可是它沒有壓縮這個JS文件。要作到這一點，你必須使用一個Gulp插件。在這種狀況下，你可使用gulp-uglify，流行的UglifyJS壓縮編繹插件

var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('build', function () {
  return gulp
    .src('./sample.js')
    .pipe(uglify())
    .pipe(gulp.dest('./build'));
});

流使可讓您添加更多的插件，而只須要讀取和寫入磁盤一次。你也能夠指定緩衝器中內容的大小。須要注意的是，若是你在壓縮以前添加它，那麼你獲得的大小是unminified。

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var size = require('gulp-size');
gulp.task('build', function () {
  return gulp
    .src('./sample.js')
    .pipe(uglify())
    .pipe(size())
    .pipe(gulp.dest('./build'));
});

Gulp的核心API只有5個，掌握了5個API就學會了Gulp，以後即可以經過管道流組合本身想要的任務。

• gulp.task(name[, deps], fn)：註冊任務
• name 是任務名稱；deps 是可選的數組，其中列出須要在本任務運行要執行的任務；fn 是任務體，這是 gulp.js 的核心了，須要花時間吃透它，詳情見此。
• gulp.src(globs[, options])：指明源文件路徑
• 用過 Grunt 的話，globs 必定不會陌生，這裏沒什麼變化；options 是可選的，具體請查看 gulp.js API
• gulp.dest(path)：指明任務處理後的目標輸出路徑
• gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])：監視文件的變化並運行相應的任務。你沒看錯，watch 做爲核心 API 出如今 gulp.js 裏了，具體用法仍是要多看文檔，不過接下來咱們會演示簡單的例子。

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
  
// 語法檢查
gulp.task('jshint', function () {
    return gulp.src('src/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});
  
// 合併文件以後壓縮代碼
gulp.task('minify', function (){
     return gulp.src('src/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist'))
        .pipe(uglify())
        .pipe(rename('all.min.js'))
        .pipe(gulp.dest('dist'));
});
  
// 監視文件的變化
gulp.task('watch', function () {
    gulp.watch('src/*.js', ['jshint', 'minify']);
});
  
// 註冊缺省任務
gulp.task('default', ['jshint', 'minify', 'watch']);

 

Grunt和Gulp區別：

grunt優勢

grunt的功能說來簡單，就是管理一系列的Task。大部分的Task都是第三方的插件，安裝好對應的NPM包，再 loadNpmTasks就能夠用了。它能使程序員使用JavaScript構建編繹工具時，幾乎不費吹灰之力。你只須要尋找合適的插件，閱讀它們的文檔，而後安裝和配置它。有基礎足夠大的插件庫，幾乎不須要開發本身的編譯任務。

grunt缺點：

1.插件很難遵照單一責任原則。由於 Grunt 的 API 設計缺憾，使得許多插件不得不負責一些和其主要任務無關的事情。好比說要對處理後的文件進行改名操做，你可能使用的是 uglify 插件，也有可能使用的是 concat 插件（取決於工做流的最後一個環節是誰）。

2.用插件作一些原本不須要件來作的事情。由於 Grunt 提供了統一的 CLI 入口，子任務由插件定義，由 CLI 命令來調用執行，所以哪怕是很簡單的外部命令（好比說運行 karma start）都得有一個插件來負責封裝它，而後再變成 Grunt CLI 命令的參數來運行，畫蛇添足。試圖用配置文件完成全部事，結果就是混亂不堪

3.若是你有一個明顯複雜的編繹過程，它可能會變得過於冗長。當開發一段時間之後，它每每很難將編繹過程做爲一個總體。一旦你編繹流程任務到達兩位數，幾乎能夠保證，你會發現本身不得不在多個目標(Targets)中跑同一個Task，以便你可以正確地執行任務流。因爲任務是須要聲明配置的，你也很難弄清楚任務真正的執行次序。須要爲每一個任務（或者每一個編繹流）編寫一份獨立的配置文件，供你的團隊使用。

4.Gruntfile維護起來困難。配置和運行分離: 配置Task和調用它們的地方離得很遠；每一個插件作的事太多:每一個Task的結果必須寫到磁盤文件，另外一個Task再讀；配置項過多:每一個插件的配置規則還不盡相同。用每一個插件，都得去學習一番。

 

Gulp

Gulp基於Node JS的一個機制，叫作 stream，Gulp的每一個插件從stream中讀取輸入，作一些處理，再輸出到stream中。 每一個插件不是拿來獨立使用的。相反，它專一於完成單一職責。只有把合適的插件組合起來，才能完成具體的Task。前一級的輸出，直接變成後一級的輸入。Grunt有一個Grunt-Cli，而Gulp直接安裝Gulp就好了。npm install -g gulp而Grunt的配置文件叫Gruntfile.js，而Gulp是gulpfile.js。

gulp.js 的五大特色：

1.使用 gulp.js，你的構建腳本是代碼，而不是配置文件；

2.使用標準庫（node.js standard library）來編寫腳本；

3.插件都很簡單，只負責完成一件事－基本上都是 20 行左右的函數；

4.任務都以最大的併發數來執行；

5.輸入／輸出（I/O）是基於「流式」的。

參考：

http://www.gulpjs.com.cn/

http://www.gruntjs.net/