前端构建大法 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来构建咱们的前端。