前端構建大法 Gulp 系列 (二)：為什么選擇gulp

系列目錄

• 前端構建大法 Gulp 系列 (一)：為什么需要前端構建

• 前端構建大法 Gulp 系列 (二)：為什么選擇gulp

• 前端構建大法 Gulp 系列 (三)：gulp的4個API 讓你成為gulp專家

• 前端構建大法 Gulp 系列 (四)：gulp實戰

在上一篇 前端構建大法 Gulp 系列 (一)：為什么需要前端構建 中，我們說了為什么需要前端構建，簡單一句話，就是讓我們的工作更有效率。

相信熟悉前端的人對Grunt一定不陌生，實際上我自己之前的很多項目也是在用Grunt, Grunt的出現是前端開發者的福音，大大減少了前端之前很多手工工作的繁瑣以及我上一篇 前端構建大法 Gulp 系列 (一)：為什么需要前端構建 提到的那些問題。

那么既然Grunt可以做到幾乎所有的事情，那么為什么我們需要Gulp呢？

Grunt與Gulp的區別

我們來看一下一般前端構建的流程, 一般情況下，我們是在腦子中是流的方式來想任務的。

二者處理流程的區別

Grunt 的方式

Gulp的方式

配置的簡潔程度

Grunt

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    } ,
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});

grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.registerTask('default', ['uglify']);
};

Gulp

gulp.task('default',function(){    
return gulp
        .src("**/*.js")
        .pipe(jshint())
        .pipe(concat())
        .pipe(uglify())
        .pipe(gulp.dest('./build/'))        
})

所以從上面的一些代碼對比來看，Gulp明顯比Grunt要簡潔易用很多。

最后，總結一些 Grunt的一些問題

• 配置過於復雜
• 插件職責不單一 （就是不SRP）
• 臨時文件目錄多
• 性能慢 （因為臨時文件多，自然讀IO多)

下一篇我們將開始學習如何使用gulp來構建我們的前端。