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 相关文章推荐
Jquery AJAX 用于计算点击率(统计)
Jun 30 Javascript
JS localStorage实现本地缓存的方法
Jun 22 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
jquery密码强度校验
Dec 02 Javascript
jQuery可见性过滤选择器用法示例
Sep 09 Javascript
js实现百度登录框鼠标拖拽效果
Mar 07 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
Vue性能优化的方法
Jul 30 Javascript
js实现飞机大战小游戏
Aug 26 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
Aug 31 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的FTP学习(二)
2006/10/09 PHP
PHP在特殊字符前加斜杠的实现代码
2011/07/17 PHP
php备份数据库类分享
2015/04/14 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
一个加密JavaScript的开源工具PACKER2.0.2
2006/11/04 Javascript
js资料toString 方法
2007/03/13 Javascript
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
javascript CSS画图之基础篇
2009/07/29 Javascript
jQuery验证Checkbox是否选中的代码 推荐
2011/09/04 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
简述JavaScript的正则表达式中test()方法的使用
2015/06/16 Javascript
jquery实现左右滑动菜单效果代码
2015/08/27 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
React中使用async validator进行表单验证的实例代码
2018/08/17 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
微信小程序图片加载失败时替换为默认图片的方法
2019/12/09 Javascript
vue中父子组件的参数传递和应用示例
2021/01/04 Vue.js
浅谈编码,解码,乱码的问题
2016/12/30 Python
python实现石头剪刀布程序
2021/01/20 Python
Python2与Python3的区别实例分析
2019/04/11 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
pandas中read_csv、rolling、expanding用法详解
2020/04/21 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
地质灾害防治方案
2014/05/14 职场文书
企业晚会策划方案
2014/05/29 职场文书
离职感谢信怎么写
2015/01/22 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js