TOP

使用 Gulp.js 构建前端项目

发布时间： 2013-12-10

Gulp.js Grunt.js 前端开发

[TOC]

#### 前言

![](https://raw.github.com/gulpjs/artwork/master/gulp.png)

不同于 Grunt.js，Gulp.js 是一款所谓“流式”的前端构建工具，Gulp.js 奉行的是“直接写程序而不是写配置文件”，构建时任务处理的文件输入／输出（I/O）是基于“流式”的。

Gulp.js 的插件遵守单一责任原则，每个插件只负责处理一件事情。

官网：[http://gulpjs.com/](http://gulpjs.com/)

#### 安装 Gulp.js

$ npm install -g gulp

检查是否安装成功：

$ gulp -v
	[22:34:38] CLI version 3.8.10

#### 开始使用

初始化，即在项目根目录下创建 `package.json`：

$ npm init

然后把 Gulp.js 安装为开发依赖的组件：

$ npm install --save-dev gulp gulp-util

在项目根目录下创建 `Gulpfile.js` 文件，内容如下：

var gulp = require('gulp');

gulp.task('default', function () {
		// do something....
	});

运行 Gulp：

# 等同于 gulp default
	$ gulp

运行指定任务：

$ gulp xxxx

#### 主要方法

注册任务：

/*
	 * @name	String			任务名称
	 * @deps	Array			可选的数组，其中列出需要在本任务运行要执行的任务
	 * @fn 		Function		任务体，回调函数，任务的具体执行过程
	 */
	gulp.task(name[, deps], fn);

指定源文件路径：

/*
	 * @globs	String|Array	数据流
	 * @options	Object			可选项
	 */
	gulp.src(globs[, options]);

> 选项设置详见：[https://github.com/gulpjs/gulp/blob/master/docs/API.md#options](https://github.com/gulpjs/gulp/blob/master/docs/API.md#options)

指定任务处理后的目标输出路径：

/*
	 * @path	String|Function	输出的目标文件目录
	 * @options	Object			可选项
	 */
	gulp.dest(path[, options]);

监视文件的变化并运行相应的任务：

gulp.watch(glob[, options], tasks);
	# 或者
	gulp.watch(glob[, options, cb]);

多任务的并行：

gulp.run(tasks...);

#### 使用插件

可以通过Gulp的插件官网查找更多的插件，[http://gulpjs.com/plugins/](http://gulpjs.com/plugins/) 。

安装插件：

$ npm install 插件名 --save-dev

一些常用的插件：

- 语法检查	`gulp-jshint`
- 合并文件	`gulp-concat`
- 压缩代码	`gulp-uglify`
- 文件重命名	`gulp-rename`
- 文件引用 include `gulp-x-includer`
- 自动前缀 `gulp-autoprefixer`
- 编译Sass `gulp-ruby-sass`
- Compass `gulp-compass`
- 图片压缩 `gulp-imagemin`
- LiveReload `gulp-livereload`
- 启动Web服务器 `gulp-connect`
- SourceMap `gulp-sourcemaps`

编写一个完整的 Gulp 任务：

// 注册开发时使用的任务
	gulp.task('development', ['jshint', 'watch']);

其中 `pipe()` 是Node.js的stream数据流的核心方法，每个任务返回的是一个数据流。

#### 创建自己的 Gulp 插件

创建 Gulp 插件同创建一个 Node.js 模块相同，插件的名称统一使用 `gulp-` 作为前缀。

先创建 `package.json`：

$ npm init

编写模块入口文件 `index.js`：

'use strict';

var util    = require('gulp-util');
    var through = require("through2");

module.exports = function(options) {
        return through.obj(function (file, encoding, callback) {
            if (file.isNull()) {
                return callback(null, file);
            }
    
            if (file.isStream()) {
                this.emit('error', new util.PluginError('Cannot use streamed files'));
                return callback();
            }
    
            if (file.isBuffer()) {
                var contents = file.contents.toString(encoding);
				// 插件实现：即处理内容 contents，正则替换等操作，略
                file.contents = new Buffer(contents);
			}
        
            callback(null, file);
        });
	};

> 一个自己写的文件 include 插件：[https://www.npmjs.com/package/gulp-x-includer](https://www.npmjs.com/package/gulp-x-includer)

#### 参考资料

- Gulp.js API文档 [https://github.com/gulpjs/gulp/blob/master/docs/API.md](https://github.com/gulpjs/gulp/blob/master/docs/API.md)
- Gulp.js 插件指南 [https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/README.md](https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/README.md)
- Gulp.js 中文文档 [http://www.gulpjs.com.cn/](http://www.gulpjs.com.cn/)

TOP