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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
Oct 17 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
canvas 实现中国象棋
Feb 17 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
Oct 25 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
Aug 17 Javascript
vue实现select下拉显示隐藏功能
Sep 30 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的Laravel框架结合MySQL与Redis数据库的使用部署
2016/03/21 PHP
用jscript启动sqlserver
2007/06/21 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
基于jQuery的图片剪切插件
2011/08/03 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
通过button将form表单的数据提交到action层的实例
2017/09/08 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
vue生命周期的探索
2019/04/03 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
python编程之requests在网络请求中添加cookies参数方法详解
2017/10/25 Python
python opencv之SIFT算法示例
2018/02/24 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python判断中文字符串是否相等的实例
2018/07/06 Python
python 文件转成16进制数组的实例
2018/07/09 Python
python web自制框架之接受url传递过来的参数实例
2018/12/17 Python
python matplotlib拟合直线的实现
2019/11/19 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
浅谈django 重载str 方法
2020/05/19 Python
python Matplotlib数据可视化(2):详解三大容器对象与常用设置
2020/09/30 Python
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
应聘教师推荐信
2013/10/31 职场文书
《小松树和大松树》教学反思
2014/02/20 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
门前三包责任书
2014/04/15 职场文书
2015年企业新年寄语
2014/12/08 职场文书
2015年高考寄语或鼓励的话
2015/03/23 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电