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动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
浅析JavaScript中的CSS属性及命名规范
Nov 28 Javascript
js 数组去重的四种实用方法
Sep 09 Javascript
简述JavaScript对传统文档对象模型的支持
Jun 16 Javascript
js 实现数值的千分位及保存小数方法(推荐)
Aug 01 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
google广告之另类js调用实现代码
Aug 22 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
php提高网站效率的技巧
2015/09/29 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
腾讯UED 漂亮的提示信息效果代码
2011/09/12 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
JavaScript实现数字数组按照倒序排列的方法
2015/04/06 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
解决使用vue.js路由后失效的问题
2018/03/17 Javascript
jQuery轻量级表单模型验证插件
2018/10/15 jQuery
JS拖动选择table里的单元格完整实例【基于jQuery】
2019/05/28 jQuery
简单了解vue中父子组件如何相互传递值(基础向)
2019/07/12 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
python常规方法实现数组的全排列
2015/03/17 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
利用python和ffmpeg 批量将其他图片转换为.yuv格式的方法
2019/01/08 Python
Python之修改图片像素值的方法
2019/07/03 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
python设置随机种子实例讲解
2019/09/12 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
CSS3属性box-shadow使用指南
2014/12/09 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
教师推荐信范文
2013/11/24 职场文书
植树节活动总结
2014/04/30 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
法定代表人资格证明书
2014/09/11 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
python析构函数用法及注意事项
2021/06/22 Python