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制作简单爬虫教程

前言:最近想学习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

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

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

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

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

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,

Node.js编程中客户端Session的使用详解

静态网站很容易扩展.你只需要全部缓存,不需要考虑从不同服务器组合有状态的内容给用户. 可惜,大多数Web应用使用有状态的内容提供个性化体验.如果你的应用可以登录,就需要记住用户的Session.经典的处理方法是客户端设置包含随机唯一Session标识的Cookie,被标识的Session数据保存到服务端. 扩展有状态服务 当扩展服务的时候,你肯定有三种选择: 不同服务端同步Session数据 不同服务端连接单点中心(获取Session) 保证用户访问同一个服务端 但都有缺陷: 同步数据增加性能开

Node.js 8 中的 util.promisify的详解

Node.js 8 于上个月月底正式发布,带来了 很多新特性 .其中比较值得注意的,便有 util.promisify() 这个方法. util.promisify() 虽然 Promise 已经普及,但是 Node.js 里仍然有大量的依赖回调的异步函数,如果我们每个函数都封装一次,也是齁麻烦齁麻烦的,比齁还麻烦. 所以 Node8 就提供了 util.promisify() 这个方法,方便我们快捷的把原来的异步回调方法改成返回 Promise 实例的方法,接下来,想继续用队列,还是 awai

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\

JSP中EL表达式的用法详解(必看篇)

EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} 所有EL都是以${为起始.以}为结尾的.上述EL范例的意思是:从Session的范围中,取得 用户的性别.假若依照之前JSP Scriptlet的写法如下: User user =(User)session.getAttribute("user"); String sex =user.getSex( );

JavaScript中的splice方法用法详解

JavaScript中的splice主要用来对js中的数组进行操作,包括删除,添加,替换等. 注意:这种方法会改变原始数组!. 1.删除-用于删除元素,两个参数,第一个参数(要删除第一项的位置),第二个参数(要删除的项数) 2.插入-向数组指定位置插入任意项元素.三个参数,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项) 3.替换-向数组指定位置插入任意项元素,同时删除任意数量的项,三个参数.第一个参数(起始位置),第二个参数(删除的项数),第三个参数(插入任意数量的项) 示例:

MybatisPlus #{param}和${param}的用法详解

作用 mybatis-plus接口mapper方法中的注解(如@Select)或者xml(如)传入的参数是通过#{param}或者${param}来获取值. 区别 1.解析方式: #{param}:会进行预编译,而且进行类型匹配,最后进行变量替换,括号中可以添加映射类型如 #{param,javaType=int,jdbcType=NUMERIC} ${param}:只实现字符串拼接,并不进行数据类型匹配 ${param}表达式主要用户获取配置文件数据,DAO接口中的参数信息,当 $ 出现在映射

Oracle中游标Cursor基本用法详解

查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的 返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT INTO语法如下: SELECT [DISTICT|ALL]{*|column[,column,...]} INTO (variable[,variable,...] |record) FROM {table|(sub-query)}[alias] WHERE............ PL/SQL

oracle数据库中sql%notfound的用法详解

SQL%NOTFOUND 是一个布尔值.与最近的sql语句(update,insert,delete,select)发生交互,当最近的一条sql语句没有涉及任何行的时候,则返回true.否则返回false.这样的语句在实际应用中,是非常有用的.例如要update一行数据时,如果没有找到,就可以作相应操作.如: begin update table_name set salary = 10000 where emp_id = 10; if sql%notfound then insert into

使用Node.js实现ORM的一种思路详解(图文)

ORM是O和R的映射.O代表面向对象,R代表关系型数据库.二者有相似之处同时也各有特色.就是因为这种即是又非的情况,才需要做映射的. 理想情况是,根据关系型数据库(含业务需求)的特点来设计数据库.同时根据面向对象(含业务需求)的特点来设计模型(实体类).然后再去考虑如何做映射.但是理想很骨jian感dan,现实太丰fu满za. 没见哪个ORM是这么做的,也没见哪位高手会这么做设计.那么实际情况是什么样子的呢?以.net的Entity Framework为例. DB frist,就是先设计好数据库