# Gulp 前端自動化流程管理。在JavaScript的世界里，Grunt.js是基于Node.js的自動化任務運行器。2013年02月18日，Grunt v0.4.0 發布。Fractal公司積極參與了數個流行Node.js模塊的開發，它去年發布了一個新的構建系統Gulp，希望能夠取其精華，并取代Grunt，成為最流行的JavaScript任務運行器。 ### Gulp和Grunt的異同點 - 易于使用：采用代碼優于配置策略，Gulp讓簡單的事情繼續簡單，復雜的任務變得可管理。 - 高效：通過利用Node.js強大的流，不需要往磁盤寫中間文件，可以更快地完成構建。 - 高質量：Gulp嚴格的插件指導方針，確保插件簡單并且按你期望的方式工作。 - 易于學習：通過把API降到最少，你能在很短的時間內學會Gulp。構建工作就像你設想的一樣：是一系列流管道。 ### Gulp特點 - **易用**：Gulp相比Grunt更簡潔，而且遵循代碼優于配置策略，維護Gulp更像是寫代碼。 - **高效**：Gulp相比Grunt更有設計感，核心設計基于Unix流的概念，通過管道連接，不需要寫中間文件。 - **高質量**：Gulp的每個插件只完成一個功能，這也是Unix的設計原則之一，各個功能通過流進行整合并完成復雜的任務。例如：Grunt的imagemin插件不僅壓縮圖片，同時還包括緩存功能。他表示，在Gulp中，緩存是另一個插件，可以被別的插件使用，這樣就促進了插件的可重用性。目前官方列出的有673個插件。 ### Gulp示例 ~~~ var gulp = require('gulp'); var jshint = require('gulp-jshint'); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify'); // Lint JS gulp.task('lint', function() { return gulp.src('src/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // Concat & Minify JS gulp.task('minify', function(){ return gulp.src('src/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist')); }); // Watch Our Files gulp.task('watch', function() { gulp.watch('src/*.js', ['lint', 'minify']); }); // Default gulp.task('default', ['lint', 'minify', 'watch']); ~~~ ### 參考資料 - [gulp](http://gulpjs.com/) - [gulp fiction](http://gulpfiction.divshot.io/): 可視化配置gulp工作流程。 - [前端工程的構建工具對比 Gulp vs Grunt](http://segmentfault.com/blog/aomine_2450732/1190000002491282)