Gulp系列文章入门Gulp

前言

gulp是一种比较容易上手的前端构建工具，相比于时下流行的webpack，gulp的学习成本更低，配置也简单，在很多前端框架的构建上（如bootstrap）都选择了gulp作为打包工具

安装运行

1. 全局安装

npm install --global gulp

2. 作为项目依赖安装

npm install --save-dev gulp

3. 创建gulpfile.js配置文件

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

4. 运行gulp

gulp

gulp命令会默认执行default任务，如果想要单独执行特定的任务，可以输入gulp <task> <othertask>

API

gulp相关的API很少，所以很快就能学会

gulp.src(globs[, options])

gulp.src()指定需要处理的源文件的路径，返回当前文件流，可以被piped到其他插件。

globs：需要处理的源文件匹配符路径。类型(必填)：String or StringArray；

'a.js'  指定具体文件，例`src/a.js`(src目录下的a.js文件)
'*'     匹配所有文件，例`src/*.js`(包含src目录下的所有js文件)
'**'    匹配0个或多个子文件夹，例`src/**/*.js`(包含src的0个或多个子文件夹下的js文件)
'{}'    匹配多个属性，例`src/*.{jpg,png,gif}`(包含src中所有jpg/png/gif文件)
'!'     排除文件，例`!src/a.js`(不包含src下的a.js文件)

var gulp = require('gulp'),
  less = require('gulp-less');
gulp.task('testLess', function () {
  // 匹配less目录中不包括extend和page目录下的所有less文件
  gulp.src(['less/**/*.less','!less/{extend,page}/*.less'])
    .pipe(less()) // 把less编译为css
    .pipe(gulp.dest('./css')); // 输出到css目录下
});

options: 任务配置项。 类型(可选)：Object，有3个属性buffer、read、base

buffer  布尔类型，默认值true。设置false，将不缓冲文件，返回file.content的流
read    布尔类型，默认值true。设置false，将不执行读取文件操作，返回null
base    字符串类型，设置输出路径以某个路径的某个组成部分为基础向后拼接

gulp.src('client/js/**/*.js') // 匹配'client/js/somedir/somefile.js'
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/somedir/somefile.js'

gulp.src('client/js/**/*.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'));  // 写入 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

gulp.dest()指定处理完后文件输出的路径。可以将它pipe到多个文件夹。如果某文件夹不存在，将会自动创建它

path： 类型(必填)：String or Function 指定文件输出路径，或者定义一个函数，返回文件输出路径

options： 类型(可选)：Object，有2个属性cwd、mode；

cwd：类型：String 默认：当前脚本的工作目录路径（文件输出路径为相对路径会用到）
mode：类型：String 默认：0777 指定被创建文件夹的权限

gulp.src('./client/templates/*.jade')
  .pipe(jade())
  .pipe(gulp.dest('./build/templates'))
  .pipe(minify())
  .pipe(gulp.dest('./build/minified-templates'));

gulp.task(name[, deps], fn)

gulp.task()定义一个task任务

name：  类型(必填)：String 指定任务的名称（不应该有空格）
deps：  类型(可选)：StringArray，该任务依赖的任务列表
fn：    类型(必填)：Function 该任务调用的插件操作

默认的，task 将以最大的并发数执行，也就是说，gulp会一次性运行所有的task并且不做任何等待。如果想要创建一个序列化的task队列，并以特定的顺序执行，需要使用return语句

gulp.task('testLess', function() {
  return gulp.src(['./less/style.less'])
    .pipe(less())
    .pipe(gulp.dest('./css'))
})
// 执行完testLess任务后再执行minicss任务
gulp.task('minicss', ['testLess'], function() {
  gulp.src(['./css/*.css'])
    .pipe(minifyCss())
    .pipe(gulp.dest('./dist/css'))
})

gulp.watch(globs [, options], tasks)、gulp.watch(globs [, options, cb])

gulp.watch()用于监听文件变化，文件一修改就会执行指定的任务

globs：       需要处理的源文件匹配符路径。类型(必填)：String or StringArray
options:      任务配置项。 类型(可选)：Object，有3个属性buffer、read、base
tasks：       类型(必填)：StringArray 需要执行的任务的名称数组
cb(event)：   类型(可选)：Function 每个文件变化执行的回调函数
  event.type： 　　类型:String  发生的变动的类型（added, changed 或者 deleted）
　event.path：  　 类型:String  触发了该事件的文件的路径

gulp.task('testWatch', function() {
  gulp.watch('less/**/*.less', ['testLess'])
})

gulp.task('testWatch', function() {
  gulp.watch('js/**/*.js', function(event) {
    console.log('File ' + event.path + ' was ' + event.type)
  }) 
})

var watcher = gulp.watch('js/**/*.js', ['uglify','reload']);
watcher.on('change', function(event) {
  console.log('File ' + event.path + ' was ' + event.type)
});

命令行

参数标记

-v 或 --version 　　　　　　　会显示全局和项目本地所安装的gulp版本号
--require <module path> 　　 将会在执行之前reqiure一个模块。可以使用多个--require
--gulpfile <gulpfile path> 　手动指定一个gulpfile的路径，会将CWD设置到该gulpfile所在目录
--cwd <dir path> 　　　　　　 手动指定CWD。定义gulpfile查找的位置，所有的相应依赖会从这里开始计算相对路径
-T 或 --tasks 　　　　　　　　会显示所指定 gulpfile 的 task 依赖树
--tasks-simple 　　　　　　　 会以纯文本的方式显示所载入的 gulpfile 中的 task 列表
--color 　　　　　　　　　　　强制 gulp 和 gulp 插件显示颜色，即便没有颜色支持
--no-color 　　　　　　　　　 强制不显示颜色，即便检测到有颜色支持
--silent 　　　　　　　　　　 禁止所有的 gulp 日志

Tasks

可以通过gulp <task> <othertask>方式运行任务，如果只运行 gulp 命令，则会执行所注册的名为 default 的 task，如果没有这个 task，那么 gulp 会报错

串行插件

gulp执行多个任务的时候是异步的，但是实际应用场景中，任务的执行希望有个先后顺序，gulp-sequence插件能够很好的完成这个任务

npm install --save-dev gulp-sequence

var gulp = require('gulp')
var gulpSequence = require('gulp-sequence')
gulp.task('test', gulpSequence(['a', 'b'], 'c', ['d', 'e'], 'f'))

上面的示例，会先并行执行'a'、'b'，再执行'c'，再并行执行'd'、'e'，再执行'f'