在上一篇 前端構建大法 Gulp 系列 (一)：為什么需要前端構建 中，我們說了為什么需要前端構建，簡單一句話，就是讓我們的工作更有效率。
相信熟悉前端的人對Grunt一定不陌生，實際上我自己之前的很多項目也是在用Grunt, Grunt的出現是前端開發者的福音，大大減少了前端之前很多手工工作的繁瑣以及我上一篇 前端構建大法 Gulp 系列 (一)：為什么需要前端構建 提到的那些問題。
那么既然Grunt可以做到幾乎所有的事情，那么為什么我們需要Gulp呢？
Gulp
Grunt與Gulp的區別
Paste_Image.png
我們來看一下一般前端構建的流程
前端構建流程
一般情況下，我們是在腦子中是一流的方式來做事的。
二者處理流程的區別
Grunt 的方式
Grunt
Gulp的方式
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來構建我們的前端。
