前端構建大法 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來構建咱們的前端。