在上一篇 前端構(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)建我們的前端旺韭。
