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

时间: 2017-07-15

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

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

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

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

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

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

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 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,

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

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

快速掌握Node.js环境的安装与运行方法

安装程序 NodeJS 提供了一些安装程序,都可以在 nodejs.org 这里下载并安装. Windows 系统下,选择和系统版本匹配的 .msi 后缀的安装文件.Mac OS X 系统下,选择 .pkg 后缀的安装文件. 编译安装 Linux 系统下没有现成的安装程序可用,虽然一些发行版可以使用 apt-get 之类的方式安装,但不一定能安装到最新版.因此 Linux 系统下一般使用以下方式编译方式安装 NodeJS. 1.确保系统下 g++ 版本在 4.6 以上,python 版本在 2.

跟我学Nodejs(一)--- Node.js简介及安装开发环境

学习资料 1.深入浅出Node.js 2.Node.js开发指南 简介(只捡了我觉得重要的) Node.js是让Javascript脱离浏览器运行在服务器的一个平台,不是语言: Node.js采用的Javascript引擎是来自Google Chrome的V8:运行在浏览器外不用考虑头疼的Javascript兼容性问题 采用单线程.异步IO与事件驱动的设计来实现高并发(异步事件也在一定程度上增加了开发和调试的难度): Node.js内建一个HTTP服务器,所以对于网站开发来说是一个好消息:  

Node.js环境在linux上的部署教程

我们以centOS为例来说说如何部署node.js环境 一 打开centos,然后开始下载node.js包 curl --silent --location https://rpm.nodesource.com/setup_6.x | bash - yum -y install nodejs 二 安装gcc环境 yum install gcc-c++ make 安装完成! 三 安装nodejs的npm,这是一个包程序工具,类似于vs里的nuget! sudo yum install nodejs

windows系统下node.js环境配置与安装教程图文详解(详细版)

国内目前关注最高,维护最好的一个关于nodejs的网站应该是http://www.cnodejs.org/ windows系统下简单nodejs环境配置. 第一步:下载安装文件 下载地址:官网https://nodejs.org/en/download/ 这里用的是 第二步:安装nodejs 下载完成之后,双击 node-v6.9.1-x64.msi,开始安装nodejs,默认是安装在C:\Program Files\nodejs下面 第三步:安装相关环境 打开C:\Program Files\

Mac中Python 3环境下安装scrapy的方法教程

前言 最近抽空想学习一下python的爬虫框架scrapy,在mac下安装的时候遇到了问题,逐一解决了问题,分享一下,话不多说了,来一起看看详细的介绍吧. 步骤如下: 1. 从官网 下载最新版本Python 3.6.3(本地快速下载安装:http://www.jb51.net/softs/583651.html) # 在Mac上Python3环境下安装scrapy 2. 安装 Python3 在终端输入python3出现下面的内容表示安装成功 ➜ ~ python3 Python 3.6.3 (

node.js插件nodeclipse安装图文教程

在eclipse插件中,node.js插件中比较知名的是nodeclipse,本文为大家介绍了nodeclipse安装教程,供大家参考,具体内容如下 安装nodeclipse 1. 依次点击工具→插件安装→浏览eclipse插件市场→搜索node.js→在搜索结果里找nodeclipse如下图 2.点击上图中的install开始加载,加载完毕点下一步接受许可协议静待安装完成即可 3. 安装完毕后重启HBuilder 4. 新建node项目:依次点击菜单文件→新建→其他如下图 5.选择要新建的no

node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法

在使用npm install安装扩展插件时,系统提示"npm install Error: ENOENT, stat 'C:Users<用户名>AppDataRoamingnpm'". 以前都是很顺利的安装过程,没出现这种情况.我这里的解决办法是直接创建上面提示的目录就好了,应该是node.js权限不够,在此备注. 有时候就是这样,很可能一个很久都无法解决的问题,实际解决方法很简单,就是这么任性!!

Node.js环境下JavaScript实现单链表与双链表结构

单链表(LinkedList)的javascript实现 npmjs相关库: complex-list.smart-list.singly-linked-list 编程思路: add方法用于将元素追加到链表尾部,借由insert方法来实现: 注意各个函数的边界条件处理. 自己的实现: SingleNode.js (function(){ "use strict"; function Node(element){ this.element = element; this.next = n

Node.js环境下Koa2添加travis ci持续集成工具的方法

前言 因为最近使用koa2做项目测试开发,所以想整合下travis ci,网上资料也比较少,于是自己就整了个,做个记录.分享出来供大家参考学习,下面来看看详细的介绍吧. 方法如下: 先来看下travis.yml的配置 language: node_js node_js: - "6" before_script: - ./node_modules/.bin/knex migrate:latest --knexfile='./app/knexfile.js' script: - npm r