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

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

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

Gulp

Grunt與Gulp的區(qū)別

Paste_Image.png

我們來(lái)看一下一般前端構(gòu)建的流程

前端構(gòu)建流程

一般情況下，我們是在腦子中是一流的方式來(lái)做事的。

二者處理流程的區(qū)別

Grunt 的方式

Grunt

Gulp的方式

Gulp

配置的簡(jiǎn)潔程度

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/'))        
})

所以從上面的一些代碼對(duì)比來(lái)看，Gulp明顯比Grunt要簡(jiǎn)潔易用很多。

最后，總結(jié)一些 Grunt的一些問(wèn)題

• 配置過(guò)于復(fù)雜
• 插件職責(zé)不單一 （就是不SRP）
• 臨時(shí)文件目錄多
• 性能慢 （因?yàn)榕R時(shí)文件多，自然讀IO多)

下一篇我們將開(kāi)始學(xué)習(xí)如何使用gulp來(lái)構(gòu)建我們的前端。