node.js中grunt和gulp的区别详解

node.js中grunt和gulp的区别详解

自nodeJS登上前端舞台，自动化构建变得越来越流行。目前最流行的当属grunt和gulp,这两个光看名字挺像，功能也差不多，不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地，有着她独到的优点。

易用 Gulp相比Grunt更简洁，而且遵循代码优于配置策略，维护Gulp更像是写代码。
高效 Gulp相比Grunt更有设计感，核心设计基于Unix流的概念，通过管道连接，不需要写中间文件。
高质量 Gulp的每个插件只完成一个功能，这也是Unix的设计原则之一，各个功能通过流进行整合并完成复杂的任务。例如：Grunt的imagemin插件不仅压缩图片，同时还包括缓存功能。他表示，在Gulp中，缓存是另一个插件，可以被别的插件使用，这样就促进了插件的可重用性。目前官方列出的有673个插件。
易学 Gulp的核心API只有5个，掌握了5个API就学会了Gulp，之后便可以通过管道流组合自己想要的任务。
流使用Grunt的I/O过程中会产生一些中间态的临时文件，一些任务生成临时文件，其它任务可能会基于临时文件再做处理并生成最终的构建后文件。而使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。
代码优于配置 维护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的区别的讲解，如果大家有疑问请留言或者到本站社区进行讨论交流，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

# node.js中grunt和gulp # node.js中grunt和gulp的对比 # nodejs实现简单的gulp打包 # gulp安装以及打包合并的方法教程 # Angular.js项目中使用gulp实现自动化构建以及压缩打包详解 # nodejs用gulp管理前端文件方法 # 使用bat打开多个cmd窗口执行gulp、node # 在Mac OS上安装使用Node.js的项目自动化构建工具Gulp # 基于Node.js的JavaScript项目构建工具gulp的使用教程 # 前端必会的轻量打包工具gulp使用详解 # 临时文件 # 自己的 # 多个 # 能在 # 这两个 # 可以通过 # 希望能 # 如日中天 # 更有 # 高质量 # 不需 # 谢谢大家 # 易用 # 后便 # 最流行 # 再做 # 中会 # 会了 # 要写 # 光看

返回目录在线咨询

上一篇：PHP实现安全地处理文件上传并作为附件发送电子邮件教程
下一篇：五站合一建站系统如何实现多语言建站与智能SEO优化配置？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

node.js中grunt和gulp的区别详解

您的项目需求