node.js中grunt和gulp的区别详解
程序员文章站
2022-05-26 08:30:35
node.js中grunt和gulp的区别详解
自nodejs登上前端舞台,自动化构建变得越来越流行。目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不...
node.js中grunt和gulp的区别详解
自nodejs登上前端舞台,自动化构建变得越来越流行。目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点。
- 易用 gulp相比grunt更简洁,而且遵循代码优于配置策略,维护gulp更像是写代码。
- 高效 gulp相比grunt更有设计感,核心设计基于unix流的概念,通过管道连接,不需要写中间文件。
- 高质量 gulp的每个插件只完成一个功能,这也是unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。目前官方列出的有673个插件。
- 易学 gulp的核心api只有5个,掌握了5个api就学会了gulp,之后便可以通过管道流组合自己想要的任务。
- 流 使用grunt的i/o过程中会产生一些中间态的临时文件,一些任务生成临时文件,其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用gulp的优势就是利用流的方式进行文件的处理,通过管道将多个任务和操作连接起来,因此只有一次i/o的过程,流程更清晰,更纯粹。
-
代码优于配置 维护gulp更像是写代码,而且gulp遵循commonjs规范,因此跟写node程序没有差别。
一个简单的gulpfile.js配置格式
var gulp = require('gulp'); var jshint = require('gulp-jshint'); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify'); // lint js gulp.task('lint', function() { return gulp.src('src/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')); }); // concat & minify js gulp.task('minify', function(){ return gulp.src('src/*.js') .pipe(concat('all.js')) .pipe(gulp.dest('dist')) .pipe(rename('all.min.js')) .pipe(uglify()) .pipe(gulp.dest('dist')); }); // watch our files gulp.task('watch', function() { gulp.watch('src/*.js', ['lint', 'minify']); }); // default gulp.task('default', ['lint', 'minify', 'watch']);
以上就是node.js中grunt和gulp的区别的讲解,如果大家有疑问请留言或者到本站社区进行讨论交流,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
上一篇: ES6中的rest参数与扩展运算符详解
下一篇: 深入理解vue2.0路由如何配置问题
推荐阅读
-
详解Python中__str__和__repr__方法的区别
-
C#中Property和Attribute的区别实例详解
-
详解HTML5中div和section以及article的区别
-
Android MotionEvent中getX()和getRawX()的区别实例详解
-
关于Sequelize连接查询时inlude中model和association的区别详解
-
详解MySQL中DROP,TRUNCATE 和DELETE的区别实现mysql从零开始
-
Android中dip、dp、sp、pt和px的区别详解
-
照片VS图形:详解照片和图形在平面设计中的区别与应用
-
SQL中过滤条件放on和where中的区别详解
-
对python中dict和json的区别详解