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

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的区别的讲解，如果大家有疑问请留言或者到本站社区进行讨论交流，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • 利用node.js实现自动生成前端项目组件的方法详解

    利用node.js实现自动生成前端项目组件的方法详解

    本文主要给大家介绍了关于利用node.js实现自动生成前端项目组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 脚本编写背景 写这个小脚本的初衷是,项目本身添加一个组件太繁琐了,比如我想要去建立一个login的组件,那么我需要手动去IDE中,创建index.js(组件出口文件),login.js(业务文件),login.html,login.less这四个文件.因为每个组件都有一些输出的代码,还要把之前组件的那几行拷贝过来,这种作业真的烦,于是乎写了一个小脚本去自动

  • mac上node.js环境的安装测试

    mac上node.js环境的安装测试

    如果大家之前做过web服务器的人都知道,nginx+lua与现在流行的Node.js都是可以做web服务器的,前者在程序的写法和配置上要比后者麻烦,但用起来都是差不多.在这里建议大家如果对lua脚本语言不了解,可以多了解这门脚本语言,他号称是所有脚本语言执行效率是最高的一门脚本语言.底层是基于C语言的,非常好用,跨平台! 下面我就来给大家配置一下node.js环境. 二 mac node.js环境的配置 第一步:打开终端,输入以下命令安装Homebrew ruby -e "$(curl -fsS

  • node.js express中app.param的用法详解

    前言 大家应该都知道,express中app.param方法用于验证参数,我个人把它理解成类似对参数过滤的一个中间件.在这里我来结合几个demo,加深大家对app.param方法的理解.下面话不多说,来一起通过示例代码看看详细的介绍吧. demo1: var express = require('express'); var app = express(); app.param(function(param, option) { return function (req, res, next,

  • Express + Node.js实现登录拦截器的实例代码

    介绍 这边的拦截器,对应于spring MVC中的filter,所有的http请求,通过拦截器处理之后才能访问到对应的代码/资源. 最典型的应用场景就是实现访问权限控制,给予不同的用户/用户组不同的页面和接口访问权限,仅能够访问允许的页面和接口. 场景 app.post('/login', function(request, res, next){ // do something }); app.post('/getData',function(request, res, next){ // d

  • Node.js中流(stream)的使用方法示例

    Node.js中流(stream)的使用方法示例

    前言 本文主要给大家介绍了关于Node.js 流(stream)的使用方法,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 流是基于事件的API,用于管理和处理数据,而且有不错的效率.借助事件和非阻塞I/O库,流模块允许在其可用的时候动态处理,在其不需要的时候释放掉. 使用流的好处 举一个读取文件的例子: 使用fs.readFileSync同步读取一个文件,程序会被阻塞,所有的数据都会被读取到内存中. 换用fs.readFile读取文件,程序不会被阻塞,但是所有的数据依旧会被一次性

  • 基于node.js制作简单爬虫教程

    基于node.js制作简单爬虫教程

    前言:最近想学习node.js,突然在网上看到基于node的爬虫制作教程,所以简单学习了一下,把这篇文章分享给同样初学node.js的朋友. 目标:爬取 http://tweixin.yueyishujia.com/webapp/build/html/ 网站的所有门店发型师的基本信息. 思路:访问上述网站,通过chrome浏览器的network对网页内容分析,找到获取各个门店发型师的接口,对参数及返回数据进行分析,遍历所有门店的所有发型师,直到遍历完毕,同事将信息存储到本地. 步骤一:安装nod

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

    node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

  • 基于js中this和event 的区别(详解)

    今天在看javascript入门经典-事件一章中看到了 this 和 event 两种传参形式.因为作为一个初级的前端开发人员平时只用过 this传参,so很想弄清楚,this和event的区别是什么,什么情况下用什么比较合适. onclick = changeImg(this)       vs     onclick = changeImg(event) <img src='usa.gif' onclick="changeImg(event)" /> <scrip

  • 对node.js中render和send的用法详解

    大多数情况下,渲染内容用res.render(),将会根据views中的模板文件进行渲染.如果不想使用views文件夹,想自己设置文件夹名字,那么app.set("views","aaaa"); 如果想写一个快速测试页,当然可以使用res.send().这个函数将根据内容,自动帮我们设置了Content-Type头部和200状态码.send()只能用一次,和end一样.和end不一样在哪里?能够自动设置MIME类型. 如果想使用不同的状态码,可以: res.stat

  • Node.js中Express框架的使用教程详解

    Node.js中Express框架的使用教程详解

    目录 Express简介 Express生成器 1. 什么是Express生成器 2. 安装Express生成器 创建Express项目 安装项目依赖 运行Express项目 Express目录结构说明 创建一个新路由模块 1. 创建ejs模块文件 2. 创建路由文件 3. 在app.js中引入路由 4. 运行项目 经过前面几天对Node.js的学习,基本的开发知识已经逐渐掌握,所谓工欲善其事必先利其器,今天进一步学习Node.js的开发框架Express.利用Express框架可以快速的进行W

  • Node.js中参数传递的两种方式详解

    目录 参数传递方式 GET方式 POST方式 动态网页 参数传递方式 在Node.js中,参数传递常见的共两种方式: GET方式:通过地址栏键=值的方式进行传递. POST方式:通过表单的方式传递请求数据. GET方式 GET方式通常是在请求地址中以[?参数1=值1&参数2=值2]的格式进行传递,在Node.js中可以通过获取url然后进行获取参数,如下所示: //1.引入http模块 var http = require('http'); //2.创建服务 var server = http.

  • Node.js中HTTP模块与事件模块详解

    Node.js中HTTP模块与事件模块详解

    Node.js的http服务器 通过使用HTTP模块的低级API,Node.js允许我们创建服务器和客户端.刚开始学node的时候,我们都会遇到如下代码: 复制代码 代码如下: var http = require('http'); http.createServer(function (req,res) {     res.end('Hello World\n'); }).listen(3000,"127.0.0.1"); console.log("Server funni

  • node.js中Util模块作用教程示例详解

    目录 从类型判断说起 严格相等 Error First & Promise 调试与输出 从类型判断说起 在 JavaScript 中,进行变量的类型校验是一个非常令人头疼的事,如果只是简单的使用 typeof 会到各种各样的问题. 举几个简单的: console.log(typeof null) // 'object' console.log(typeof new Array) // 'object' console.log(typeof new String) // 'object' 后来,大

  • Node.js中创建和管理外部进程详解

    Node.js中创建和管理外部进程详解

    Node被设计用来高效的处理I/O操作,但是你应该知道,有些类型的程序并不适合这种模式.比如,如果你打算用Node处理一个CPU密集的任务,你可能会堵塞事件循环,并因此降低了程序的响应.替代办法是,把CPU密集的任务分配给一个单独的进程来处理,从而释放事件循环.Node允许你产生进程,并把这个新进程做为它父进程的子进程.在Node里,子进程可以和父进程进行双向通信,而且在某种程度上,父进程还可以监控和管理子进程. 另外一种需要使用子进程的情况是,当你想简单地执行一个外部命令,并让Node获取命令

  • Node.js中使用计时器定时执行函数详解

    如果你熟悉客户端JavaScript编程,你可能使用过setTimeout和setInterval函数,这两个函数允许延时一段时间再运行函数.比如下面的代码, 一旦被加载到Web页面,1秒后会在页面文档后追加"Hello there": 复制代码 代码如下: var oneSecond = 1000 * 1; // one second = 1000 x 1 ms setTimeout(function() { document.write('<p>Hello there.

  • Node.js中的HTTP请求与响应详解

    在C#.OC中也是客户端发起一个请求,服务端作出响应.我们可以把这个过程抽象理解 . 1.客户端给服务端发起请求相当于向服务端写入一个流(writable) 2.服务端读取客户端的流(readable) 3.服务端向客户端作出响应相当于向客户端写入一个流(writable) 4.客户端读取服务端的响应(readable) 整个流程分为两部分一是客户端的处理而是服务端的处理.最主要的还是客户端请求和服务端响应. 一.http.ClientRequest对象 它实现了writable流,可以使用它的

随机推荐