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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
用Mootools获得操作索引的两种方法分享
Dec 12 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
Mar 18 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
原生js封装的ajax方法示例
Aug 02 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 Javascript
JavaScript中继承原理与用法实例入门
May 09 Javascript
vue实现lodop打印功能的示例
Nov 11 Javascript
Node与Python 双向通信的实现代码
Jul 16 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数组实现无限分类,不使用数据库,不使用递归.
2006/12/09 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
CI(Codeigniter)的Setting增强配置类实例
2016/01/06 PHP
ThinkPHP框架里隐藏index.php
2016/04/12 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
ExtJS 入门
2010/10/29 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
js实现双人五子棋小游戏
2020/05/28 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python urlopen()函数 示例分享
2014/06/12 Python
在django view中给form传入参数的例子
2019/07/19 Python
Django权限设置及验证方式
2020/05/13 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
学校办公室主任职责
2013/12/27 职场文书
幼儿园秋季开学寄语
2014/08/02 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
商业用房租赁协议书
2014/10/13 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android
尝试使用Python爬取城市租房信息
2022/04/12 Python
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers