node.js中grunt和gulp的区别详解


Posted in Javascript onJuly 17, 2017

node.js中grunt和gulp的区别详解

自nodeJS登上前端舞台,自动化构建变得越来越流行。目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点。

  1. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码。
  2. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件。
  3. 高质量 Gulp的每个插件只完成一个功能,这也是Unix的设计原则之一,各个功能通过流进行整合并完成复杂的任务。例如:Grunt的imagemin插件不仅压缩图片,同时还包括缓存功能。他表示,在Gulp中,缓存是另一个插件,可以被别的插件使用,这样就促进了插件的可重用性。目前官方列出的有673个插件。
  4. 易学 Gulp的核心API只有5个,掌握了5个API就学会了Gulp,之后便可以通过管道流组合自己想要的任务。
  5. 使用Grunt的I/O过程中会产生一些中间态的临时文件,一些任务生成临时文件,其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理,通过管道将多个任务和操作连接起来,因此只有一次I/O的过程,流程更清晰,更纯粹。
  6. 代码优于配置 维护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的区别的讲解,如果大家有疑问请留言或者到本站社区进行讨论交流,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JavaScript获得指定对象大小的方法
Jul 01 Javascript
JS实现选项卡实例详解
Nov 17 Javascript
js命名空间写法示例
Dec 18 Javascript
老生常谈JavaScript 正则表达式语法
Aug 20 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
JavaScript基础进阶之数组方法总结(推荐)
Sep 04 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
Oct 31 Javascript
vue-resource + json-server模拟数据的方法
Nov 02 Javascript
详解处理bootstrap4不支持远程静态框问题
Jul 20 Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 Javascript
js实现多张图片延迟加载效果
Jul 17 #Javascript
js指定步长实现单方向匀速运动
Jul 17 #Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 #Javascript
javascript 跨域问题以及解决办法
Jul 17 #Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 #Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 #Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 #Javascript
You might like
建立动态的WML站点(三)
2006/10/09 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
Ubuntu中支持PHP5与PHP7双版本的简单实现
2018/08/19 PHP
动手学习无线电
2021/03/10 无线电
Prototype1.6 JS 官方下载地址
2007/11/30 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
基于JavaScript实现百度搜索框效果
2020/06/28 Javascript
Puppet的一些技巧
2018/09/17 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
vue项目中常见问题及解决方案(推荐)
2019/10/21 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
手动实现把python项目发布为exe可执行程序过程分享
2014/10/23 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
应用艺术毕业生的自我评价
2013/12/04 职场文书
风险评估实施方案
2014/03/09 职场文书
2014新课程改革心得体会
2014/03/10 职场文书
班主任新年寄语
2014/04/04 职场文书
乡领导班子四风问题对照检查材料
2014/09/25 职场文书
师德标兵事迹材料
2014/12/19 职场文书
公路施工安全责任书
2015/05/08 职场文书
道歉的话怎么说
2015/05/12 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
教师教育教学随笔
2015/08/15 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书