Gulp.js----比Grunt更易用的前端构建工具

Grunt一直是前端构建工具,然而他也不是毫无缺陷的,gulp的作者 Eric Schoffstall 在他介绍 gulp.js 的 presentation 中总结了 Grunt 的几点不足之处:

  1. 插件很难遵守单一职责。因为 Grunt 的 API 设计缺憾,使得许多插件不得不负责一些和其主要任务无关的事情。比如说要对处理后的文件进行更名操作,你可能使用的是 uglify 插件,也有可能使用的是 concat 插件(取决于工作流的最后一个环节是谁)。
  2. 用插件做一些本来不需要插件来做的事情。因为 Grunt 提供了统一的 CLI 入口,子任务由插件定义,由 CLI 命令来调用执行,因此哪怕是很简单的外部命令(比如说运行 karma start)都得有一个插件来负责封装它,然后再变成 Grunt CLI 命令的参数来运行,多此一举。
  3. 试图用配置文件完成所有事,结果就是混乱不堪。规模较大,构建/分发/部署流程较为复杂的项目,其Gruntfile 有多庞杂相信有经历的人都有所体会。而 gulp.js 奉行的是“写程序而不是写配置”,它走的是一种 node way
  4. 落后的流程控制产生了让人头痛的临时文件/文件夹所导致的性能滞后。这是 gulp.js 下刀子的重点,也是本标题里“流式构建”所解决的根本问题。流式构建改变了底层的流程控制,大大提高了构建工作的效率和性能,给用户的直观感觉就是:更快。

 Gulp相对于Grunt有五大优势

1. 使用 gulp.js,你的构建脚本是代码,而不是配置文件;

2. 使用标准库(node.js standard library)来编写脚本;

3. 插件都很简单,只负责完成一件事.

4. 任务都以最大的并发数来执行;

5. 输入/输出(I/O)是基于“流式”的。

下面我们先来看看在项目中如何使用Gulp来构建项目的吧!在构建之前,我们先来安装下Gulp。

一:Gulp安装-命令行工具。全局安装gulp  命令:npm install -g gulp 如下:

如上,说明gulp已经安装完成!

二:项目demo演示

1. 进入项目gulp的根目录下,如下所示:

如上,是我项目gulp文件。

1. 在项目的根目录下看有没有package.json,如果没有的话,我们需要运行下命令 npm init,  如下所示:

之后在项目跟路径下生产package.json文件.

2. 在项目文件gulp下安装为开发的依赖组件,运行命令:npm install --save-dev  gulp  如下所示:

运行完成后,在根目录下生产node_modules文件,如下所示:

3. 在项目的跟路径下新建Gulpfile.js,如下所示:

我们可以给Gulpfile.js的初始内容为:

  var gulp = require('gulp');
  gulp.task('default', function () {});

4. 运行gulp命令,如下所示:

   
上面是最基本的运行操作,下面我们来看一个具体的demo吧,还是如上的项目gulp文件,我们现在的需求是想把gulp项目文件下的src所有js文件合并到dist目录下的build.js,压缩后的文件为build-min.js。
在这之前,我们需要安装如下插件:
1. 语法检查(gulp-jshint).
2. 合并文件(gulp-concat).
3. 压缩代码(gulp-uglify).

一:语法检查 运行命令:npm install gulp-jshint --save-dev 如下图所示:

二:合并文件 运行命令:npm install gulp-concat  --save-dev  如下图所示:

三:压缩代码 运行命令:npm install gulp-uglify --save-dev 如下图所示:

插件装完成后,我们可以看看根目录下多了几个插件,如下所示:

其中gulp-rename我们去掉,不要的。

四:在项目的根目录下创建Gulpfile.js文件,内容如下:

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify'); // 语法检查
gulp.task('jshint', function () {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
}); // 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('src/*.js')
.pipe(concat('build.js'))
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename('build.min.js'))
.pipe(gulp.dest('dist'));
}); // 监视文件的变化
gulp.task('watch', function () {
gulp.watch('src/*.js', ['jshint', 'minify']);
}); // 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);

最后在命令行下,运行gulp命令即可。如下所示:

现在我们回到目录下,可以看到如下所示:

如上Gulpfile.js,我们可以看到,基本上所有的任务都是这个模式。

gulp.task(“任务名称”,function(){

return gulp.src(“文件”)

.pie(…)

.pie(….)

})

获取要处理的文件,传递给下一个环节处理,然后把返回的结果继续传给下一个环节,直到所有环节结束,pipe就是stream模块里负责传递流数据的方法而已。

下面我们来看看gulp简单的API,如下:

1. gulp.task(name[,deps],fn) 注册任务。

name: 是任务名称,deps是可选的数组,列出需要在本任务运行要执行的任务,fn是任务体,这是gulp.js的核心,比如下面是非常简单的任务函数:

gulp.task(“test”,function(){console.log(“111”)});

task方法还可以指定按顺序运行的一组任务,如下:

gulp.task(“build”,[‘css’,’js’,’java’]);

上面的代码先指定build任务,它按次序有css,js,java三个任务组成,注意:每个任务都是异步调用,所以没有办法保证是那个任务先执行完。

如果希望要按照严格的顺序执行完,可以如下写代码:

gulp.task(‘css’,[‘js’],function(){});

如上代码表明:css的任务依赖于js,所以css一定会在js运行完成后在执行。

如果一个任务名字为default,它表示默认任务,在命令行中直接运行gulp即可。

gulp.task(‘default’,function(){});

2.gulp.src(globs[,options]):指明源文件的路径,options是可选的。

有以下几种形式:

1.js/app.js 指明确切的文件名。

2.js/*.js 某个目录所有后缀名为js的文件。

3.js/**/*.js 某个目录及其所有子目录中的所有后缀名为js的文件。

4.!js/app.js 除了js/app.js以外的所有文件

5. *.+(js|css) 匹配项目的根目录下,所有后缀名为js或css的文件。

Src方法的参数还可以是一个数组,用来指定多个成员,如下:

gulp.src([‘js/**/*.js’,!js/app.js]).

3. gulp.dest(path) 指明任务处理后的目标输出路径。

4.gulp.watch(globs[,options],task)/gulp.watch(globs[,options,cb]),监听文件的变化并运行相应的任务。

如上gulpfile.js代码,我监听了jshint及minify代码,只要语法错误就会在命令行给出提示:如下所示:

官网有更多的关于gulp插件(http://gratimax.net/search-gulp-plugins/) 我们可以根据自己的需求,来需要某个模块,注册任务和执行还是上面一样的。

Gulp.js----比Grunt更易用的前端构建工具的更多相关文章

  1. Gulp, 比Grunt更好用的前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp相对于Grunt的优势 gulp.js 的作者 ...

  2. Gulp前端构建工具

    Gulp, 比Grunt更好用的前端构建工具 Gulp, 比Grunt更好用的前端构建工具 本文主要从两个方面介绍Gulp:一,Gulp相对于Grunt的优势: 二,Gulp的安装和使用流程 Gulp ...

  3. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  4. (转载)前端构建工具gulp使用

    前端构建工具gulp使用 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中 ...

  5. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  6. 前端构建工具gulp使用 (转)

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  7. 前端构建工具 Gulp.js 上手实例

    在软件开发中使用自动化构建工具的好处是显而易见的.通过工具自动化运行大量单调乏味.重复性的任务,比如图像压缩.文件合并.代码压缩.单元测试等等,可以为开发者节约大量的时间,使我们能够专注于真正重要的. ...

  8. 前端构建工具 Gulp 压缩合并JS/CSS 并添加版本号、ES6转ES5

    Gulp 基于 Node.js 的前端构建工具,可以实现前端代码的编译(sass.less).压缩合并(JS.CSS).测试:图片的压缩:已经添加 JS 和 CSS 版本号,防止浏览器缓存. 1. 安 ...

  9. 前端读者 | 前端构建工具Gulp

    @羯瑞 整理 前言 前端工具现在层出不穷,网上搜下一大片,就看你怎么去使用了,基于项目看用什么样的构建工具.有的工具提供的功能还是非常强大的. FIS.百度团队的产品.现在百度的多个产品中使用.面向前 ...

随机推荐

  1. 大圆满的精髓–肯•威尔伯(KEN WILBER)

    作者:肯·威尔伯(Ken Wilber),目前被公认为是“后人本心理学”的最重要的思想家.理论家和发言人,其影响已经跨越了心理学领域,波及哲学和神学领域.由于肯·威尔伯在意识领域的研究极富基础性和开创 ...

  2. Webwork 学习之路【03】核心类 ServletDispatcher 的初始化

    1. Webwork 与 Xwork 搭建环境需要的的jar 为:webwork-core-1.0.jar,xwork-1.0.jar,搭建webwork 需要xwork 的jar呢?原因是这样的,W ...

  3. 制作stick侧边栏导航效果

    其实这种效果网上好多的插件,但是我想自己实现看看,其实把思路理清实现起来就非常简单了,让我们看看: 分析: 从图中我们可以看出:右边的top=100px,那么它应该在第一个框的top+height=1 ...

  4. SQLServer(MSSQL)、MySQL、SQLite、Access相互迁移转换工具 DB2DB v1.4

    最近公司有一个项目,需要把原来的系统从 MSSQL 升迁到阿里云RDS(MySQL)上面.为便于测试,所以需要把原来系统的所有数据表以及测试数据转换到 MySQL 上面.在百度上找了很多方法,有通过微 ...

  5. [MCSM]伪随机数和伪随机数生成器

    1. 几个问题 为什么需要随机数? 伪随机数伪在哪里? 为何要采用伪随机数代替随机数?这种代替是否有不利影响? 如何产生(伪)随机数? 以下内容将围绕这几个问题依次说明. 2. 参考 http://e ...

  6. web安全——数据库(mysql)

    简介 数据安全是现在互联网安全非常重要一个环节.而且一旦数据出现问题是不可逆的,甚至是灾难性的. 有一些防护措施应该在前面几个博文说过了,就不再赘述.比如通过防火墙控制,通过系统的用户控制,通过web ...

  7. SQL Server 2012新特性(1)T-SQL操作FileTable目录实例

    在SQL Server 2008提供FileStream,以借助Windows系统本身的API来强化SQL Server对于非结构化数据的支持后,SQL Server 2012更是推出了像Contai ...

  8. JavaScript面试题收集(一)

    简述javascript中的“=.==.===”的区别? 答:=赋值 ==比较是否一般相等   "3"==3 //会做类型的隐式转换,true ===比较是否严格相等 " ...

  9. Pearson(皮尔逊)相关系数及MATLAB实现

    转自:http://blog.csdn.net/wsywl/article/details/5727327 由于使用的统计相关系数比较频繁,所以这里就利用几篇文章简单介绍一下这些系数. 相关系数:考察 ...

  10. 9-cat 简明笔记

    连接或显示文件 cat [options] [file-list] 参数 file-list 是cat要处理的单个文件路径名或多个文件路径名列表,如果不指定任何参数或指定一个连字符(-)代替文件名,c ...