1. 程式人生 > >前端自動化:談談grunt和gulp的區別

前端自動化:談談grunt和gulp的區別

自nodeJS登上前端舞臺,自動化構建變得越來越流行。目前最流行的當屬grunt和gulp,這兩個光看名字挺像,功能也差不多,不過gulp能在grunt這位大哥如日中天的境況下開闢出自己的一片天地,有著她獨到的優點。

  1. 易用 Gulp相比Grunt更簡潔,而且遵循程式碼優於配置策略,維護Gulp更像是寫程式碼。
  2. 高效 Gulp相比Grunt更有設計感,核心設計基於Unix流的概念,通過管道連線,不需要寫中間檔案。
  3. 高質量 Gulp的每個外掛只完成一個功能,這也是Unix的設計原則之一,各個功能通過流進行整合並完成複雜的任務。例如:Grunt的imagemin外掛不僅壓縮圖片,同時還包括快取功能。他表示,在Gulp中,快取是另一個外掛,可以被別的外掛使用,這樣就促進了外掛的可重用性。目前官方列出的有673個外掛。
  4. 易學 Gulp的核心API只有5個,掌握了5個API就學會了Gulp,之後便可以通過管道流組合自己想要的任務。
  5. 使用Grunt的I/O過程中會產生一些中間態的臨時檔案,一些任務生成臨時檔案,其它任務可能會基於臨時檔案再做處理並生成最終的構建後文件。而使用Gulp的優勢就是利用流的方式進行檔案的處理,通過管道將多個任務和操作連線起來,因此只有一次I/O的過程,流程更清晰,更純粹。
  6. 程式碼優於配置 維護Gulp更像是寫程式碼,而且Gulp遵循CommonJS規範,因此跟寫Node程式沒有差別。

一個簡單的Gulpfile.js配置格式

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