简介
用自动化构建工具增强你的工作流程！
官网：https://gulpjs.com/
中文网：https://www.gulpjs.com.cn/
基于Nodejs的自动任务运行器，采用流的方式，借鉴了Unix操作系统的管道（pipe）思想，仅在最后一步才输出文件到磁盘，快速高效。
官方仅提供5个API（4.0又增加了几个），利用这5个API我们可以完成测试、检查、合并、压缩、格式化、自动刷新、部署、监听等任务。而且因为只有5个API，上手也是特别简单。
官方API
gulp.src(globs[, options])
匹配需要处理的源文件
- globs：源文件匹配路径
可以使用的模式:
“src/a.js”：指定具体文件；
“*”：匹配所有文件 例：src/*.js(包含src下的所有js文件)；
“**”：匹配0个或多个子文件夹 例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；
“{}”：匹配多个属性 例：src/{a,b}.js(包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
“!”：排除文件 例：!src/a.js(不包含src下的a.js文件)；// 例
gulp.src(['style/**/*.scss','!style/{extend,page}/*.scss'])- options[Object]：有3个属性buffer、read、base
options.buffer： 类型：Boolean 默认：true 设置为false，将返回file.content的流并且不缓冲文件，处理大文件时非常有用；
options.read： 类型：Boolean 默认：true 设置false，将不执行读取文件操作，返回null；
options.base： 类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接gulp.dest(path[, options])
任务完成后文件输出的路径
- path: 文件将被写入的路径（输出目录）,也可以传入一个函数，在函数中返回相应路径;
- options[Object]: 有两个属性
options.cwd： 类型：String 默认：process.cwd()：输出目录的 cwd 参数，只在所给的输出目录是相对路径时候有效；
options.mode： 类型：String 默认：0777 八进制权限字符，用以定义所有在输出目录中所创建的目录的权限；// 例
.pipe(gulp.dest('./build/minified_templates'));gulp.task(name[, deps], fn)
定义一个任务
- name：任务的名字，不能使用空格
- deps：前置任务，一个包含任务列表的数组，这些任务会在你当前任务运行之前完成（记得使用正确的异步执行方式：使用cb或者返回stream或promise ）。
//callback
// 在 shell 中执行一个命令
var exec = require('child_process').exec;
gulp.task('jekyll', function(cb) {
// 编译 Jekyll
exec('jekyll build', function(err) {
if (err) return cb(err); // 返回 error
cb(); // 完成 task
});
});
//返回stream
gulp.task('somename', function() {
var stream = gulp.src('client/**/*.js')
.pipe(minify())
.pipe(gulp.dest('build'));
return stream;
});
//返回promise
var Q = require('q');
gulp.task('somename', function() {
var deferred = Q.defer();
// 执行异步的操作
setTimeout(function() {
deferred.resolve();
}, 1);
return deferred.promise;
});- fn：定义任务所要执行的一些操作。
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
监视文件，并且可以在文件发生改动时候执行指定任务
- glob：要监听的文件入口，可以是一个也可以是多个（数组表示）
- tasks：文件改变要执行的任务的名称数组
- cb：文件改变要执行的回调函数
gulp.task('watch1', function () {
gulp.watch('less/**/*.less', ['testLess']);
});
gulp.task('watch2', function () {
gulp.watch('js/**/*.js', function (event) {
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});gulp.start(taskName1,taskName2,...)
执行指定任务
- taskName：任务名称
开始使用
一、安装
- 全局安装
npm install --global gulp- 项目依赖安装
npm install --save-dev gulp二、创建配置文件
在文件根目录创建一个名为gulpfile.js的文件。
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
});三、新建任务
根据自己需要，安装插件并且配置相应的任务。
以下通过几个案例来学习：
清除文件（del）
var gulp = require('gulp'),
del = require('del');
gulp.task('clear', function (cb) {
del(['static/css', 'static/html', 'static/js', 'static/picture', 'static/skin', 'tour.xml'], cb);
}); Less编译及压缩（gulp-less、gulp-clean-css）
var gulp = require('gulp'),
less = require('gulp-less'),
cleanCSS = require('gulp-clean-css');
gulp.task('runLess', function () {
gulp.src('src/less/*.less')
.pipe(less())
.pipe(cleanCSS({
compatibility: 'ie8', //兼容
keepSpecialComments: '*' //是否保留前缀
}))
.pipe(gulp.dest('src/css'));
});图片压缩(gulp-imagemin,gulp-changed)
var gulp = require('gulp'),
changed = require('gulp-changed'),
imagemin = require('gulp-imagemin');
gulp.task('picmin', function () {
return gulp.src('./dev/static/picture/**/*.{jpg,jpeg,png,gif,ico,JPG}')
.pipe(changed('./static/picture')) //缓存起来，只有图片变动时才压缩，提高效率
.pipe(imagemin({
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
}))
.pipe(gulp.dest('./static/picture'));
});启动本地服务器（browserSync）
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
gulp.task('server', function () {
browserSync.init({
server: {
baseDir: './', // 在 dist 目录下启动本地服务器环境，自动启动默认浏览器
proxy: '10.6.63.234'
}
});
});默认任务
可以定一个名为default的task，这个task就是默认的任务（直接运行gulp即可），可以在这里运行其他的任务，个人习惯把整套构建流程都放在这里调用。
插件可以在网上搜索或者在npm官网查找，一般以gulp开头，每个插件的配置有所不同，可以在插件介绍页查看，就不一一介绍了。
四、运行任务
在命令行中运行任务
gulp taskName //运行指定名字的task
gulp //运行默认任务可以在package.json的scripts中配置常用操作，然后通过npm run 方式调用
常用技巧
参见：https://www.gulpjs.com.cn/doc...
配合webpack
参见：https://www.jianshu.com/p/972...