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 08 Javascript
javascript下string.format函数补充
Aug 24 Javascript
angularJS 中$scope方法使用指南
Feb 09 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
js实现按钮颜色渐变动画效果
Aug 20 Javascript
去除字符串左右两边的空格(实现代码)
May 12 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
angularJs的ng-class切换class
Jun 23 Javascript
Vue.js中的computed工作原理
Mar 22 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 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错误和异长常处理总结
2014/03/06 PHP
php检测文件编码的方法示例
2014/04/25 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
jquery为页面增加快捷键示例
2014/01/31 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
浅谈JavaScript中的字符编码转换问题
2015/07/07 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
2017/05/30 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
详解Webpack实战之构建 Electron 应用
2017/12/25 Javascript
Node解决简单重复问题系列之Excel内容的获取
2018/01/02 Javascript
原生javascript AJAX 三级联动的实现代码
2018/05/04 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
python中Genarator函数用法分析
2015/04/08 Python
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python简单实现enum功能的方法
2016/04/25 Python
python处理html转义字符的方法详解
2016/07/01 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
python图的深度优先和广度优先算法实例分析
2019/10/26 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
业务员岗位职责范本
2013/12/15 职场文书
文明寝室标语
2014/06/13 职场文书
清洁工个人工作总结
2015/03/05 职场文书
总账会计岗位职责
2015/04/02 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python