gulp 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器。其不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
和其他同类型构建工具相比，gulp 的入门简单、效率更高，其 插件 的数量都不算多，但每个插件都足够精简和易用。
其更多特性和官方示例参考：http://www.gulpjs.com.cn/docs/recipes/
一、安装 Gulp
- 全局安装 gulp：
$ npm install --global gulp
- 作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
二、快速上手
在项目根目录下创建一个名为 gulpfile.js 的文件：
// 引入 gulp
var gulp = require('gulp');
// 自定义任务，调用如：gulp test
gulp.task('test', function(){
// 输出一段内容
console.log('It works');
});
// 默认任务，调用如：gulp
gulp.task('default', ['test']);
在终端中运行输入 gulp 则可以执行定义的 default 任务，如果希望执行某个指定的任务(如：test 任务)，则可以输入 gulp test。
$ gulp
输出：
$ gulp
[08:31:07] Using gulpfile ./gulpfile.js
[08:31:07] Starting 'test'...
It works
[08:31:07] Finished 'test' after 155 μs
[08:31:07] Starting 'default'...
[08:31:07] Finished 'default' after 104 μs
$
默认的名为 default 的任务（task）将会被运行。gulp.task() 的第二个参数只能是数组（array）或函数（function），如：
// 直接使用函数
gulp.task('taskOne', function(){
// 任务逻辑
});
// 一个或多个任务
gulp.task('test', ['taskOne']);
gulp.task('test', ['taskOne', 'taskTwo']);
gulp.task() 的第三个参数和第二个参数的用法一样，只是意义不同，参考：http://www.gulpjs.com.cn/docs/recipes/running-tasks-in-series/
// gulp.task('任务名', ['子任务'], 子任务的回调函数)
// 串行任务 任务依赖
gulp.task('one', function(cb) {
// 任务逻辑
});
// 任务依赖，必须先完成 参数二 的任务，才能执行 参数三 的逻辑
gulp.task('two', ['one'], function() {
// 现在任务 'one' 已经完成了
});
gulp.task('default', ['two']);
三、任务的先后顺序 - 串行任务 任务依赖
上面已经提到了串行任务的用法，gulp 可以通过返回一个 promise 或者 stream 来让串行任务变得更为清晰和易用（http://www.gulpjs.com.cn/docs/recipes/running-tasks-in-series/）。其实，我们也的确是这样使用的。
四、实战
在该实战中，我们会使用到 less 编译，样式压缩，浏览器实时刷新等常见的功能。
4.1 初始化项目
进入终端，并 cd 到对应的工作目录，建立工程，并初始化工程。
# 进入工作目录
$ cd sites
# 建立工程
$ mkdir myApp
$ cd myApp
# 初始化工程
$ npm init
4.2 添加 npm 依赖包
添加使用的 npm 包，大部分的包可以在 NPM官网 或 NPM gulpfriendly 搜索到。当前项目用到的如下：
# npm 安装
$ npm install gulp gulp-changed gulp-cssnano gulp-less gulp-rename gulp-watch opn pump --save
# yarn 安装
$ yarn add gulp gulp-connect gulp-cssnano gulp-less gulp-rename gulp-watch opn pump --save
- gulp: 这个属于基础依赖，通常都是全局安装的；
- gulp-connect：它可以运行一个支持实时重载（LiveReload）的网页服务器；
- gulp-cssnano：CSS 文件压缩；
- gulp-less：LESS 文件编译为 CSS 文件；
- gulp-rename：重命名文件；
- gulp-watch：文件变动监测；
- opn：打开指定的 URL、文件；
-
pump：让你可以使用数组替换
pipe语法；
执行安装完成后，工程目录下回生成一个 node_modules 目录。
4.3 编写 gulpfile 文件
我们在根目录新建一个 html 文件，内容可暂时留空。然后在工程目录新建一个名为 gulpfile 的 js 文件，按照下面的代码设计一个或多个任务。
var gulp = require('gulp');
var pump = require('pump');
var opn = require('opn');
var less = require('gulp-less');
var rename = require('gulp-rename');
var cssnano = require('gulp-cssnano');
var watch = require('gulp-watch');
var connect = require('gulp-connect');
// HTML 结构变化时刷新浏览器
gulp.task('html', function () {
return pump([
gulp.src('*.html'),
connect.reload()
]);
});
// 连接服务器
gulp.task('connect', function () {
connect.server({
name: 'myApp',
port: 8080,
livereload: true
});
opn('http://localhost:8080/');
});
// LESS 编译
gulp.task('less', function () {
return pump([
gulp.src('src/less/main.less'),
less(),
gulp.dest('styles/'),
cssnano(),
rename({
extname: '.min.css'
}),
gulp.dest('styles/')
]);
});
// 监控文件更新
gulp.task('watch', function () {
// 监控首页文件
watch(['./index.html', 'styles/*.css'], ['html']);
// LESS 编译
watch('src/less/main.less', ['less']);
});
gulp.task('default', ['watch', 'connect']);
4.4 运行测试
在终端输入 gulp 然后回车，浏览器回自动打开 http://localhost:8080/ ，如果你的 index.html 文件没有内容，浏览器可能会显示为空白页面。
编辑 index.html 的内容，浏览器页面也会跟着刷新。
更新 src/less/main.less 的内容时，项目的 styles/ 目录下还会出现两个 CSS 文件。
为 index.html 引入 CSS 文件，既可以实现实时编辑和预览。
可以在终端输入 control + C 来退出任务。
网友评论