gulp的使用流程:
首先通过gulp.src()方法获取到我们想要处理的文件流,然后把文件流通过pipe方法导入到gulp的插件中,最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中
1、gulp.task(name[,desp], fn);
name: 执行的任务名
desp: 任务执行需要依赖的任务
PS:如果依赖的任务是异步操作的话,那么就不会等待依赖的任务执行完再去执行该任务,但是如果想要让异步的任务执行完再去执行该任务的话,可以通过以下三种方法:
(1)通过一个毁掉函数,将回调函数放在异步执行操作里面,来通知gulp这个异步操作已经完成,这个回调函数就是任务函数的第一个参数
gulp.task('one',function(callback){ //one是一个异步执行的任务 setTimeout(function(){ console.log('one is done'); callback(); //执行回调,表示这个异步任务已经完成 },5000); }); //这时two任务会在one任务中的异步操作完成后再执行 gulp.task('two',['one'],function(){ console.log('two is done'); }); gulp.task("default", ["two"], function() { console.log("default is runing"); });
(2)定义任务时返回一个流对象。适用于任务就是操作gulp.src获取到的流的情况
gulp.task('one',function(cb){ var stream = gulp.src('client/**/*.js') .pipe(dosomething()) //dosomething()中有某些异步操作 .pipe(gulp.dest('build')); return stream; });
(3)返回一个promise对象
//一个著名的异步处理的库 https://github.com/kriskowal/q var Q = require('q'); gulp.task('one',function(cb){ var deferred = Q.defer(); // 做一些异步操作 setTimeout(function() { deferred.resolve(); }, 5000); return deferred.promise; });
2、gulp.dest(path)
path: 文件的写入位置,需要注意的是:只能用来指定要生成的文件目录,不能指定生成的文件名,生成的文件名是有导入到它的文件流决定的,如果想要改变文件名的话,使用gulp-rename
3、gulp.src(globs)
globs: 文件匹配模式,用来匹配文件路径(包括文件名),当有多种匹配时可以使用数组,但是使用数组的时候,如果要用排除模式(!单个匹配模式)的话,不能将要排除的放在数组的第一个。。。
【 * 匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾 ** 匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。 ? 匹配文件路径中的一个字符(不会匹配路径分隔符) [...] 匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法 !(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的 ?(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或1次,类似于js正则中的(pattern|pattern|pattern)? +(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次,类似于js正则中的(pattern|pattern|pattern)+ *(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次,类似于js正则中的(pattern|pattern|pattern)* @(pattern|pattern|pattern) 匹配括号中给定的任一模式1次,类似于js正则中的(pattern|pattern|pattern) 】
4、gulp.watch(glob, tasks)
glob: 监视的文件匹配模式
tasks: 文件变化后要执行的任务,为一个数组
5、重命名
比如:
rename = require('gulp-rename'),
pipe(rename('jquery.min.js')) //会将jquery.js重命名为jquery.min.js
6、js文件压缩
比如:
uglify = require("gulp-uglify");
.pipe(uglify()) //使用uglify进行压缩,更多配置请参考:
7、css文件压缩
比如:
minifyCss = require("gulp-minify-css");
.pipe(minifyCss()) //压缩
8、html文件压缩
比如:
minifyHtml = require("gulp-minify-html");
.pipe(minifyHtml()) //压缩
9、图片压缩
比如:
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant'); //png图片压缩插件
.pipe(imagemin({
progressive: true,
use: [pngquant()] //使用pngquant来压缩png图片
}))
10、文件合并
比如:
concat = require("gulp-concat");
.pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
11、less和sass的编译
(1)sass
sass = require("gulp-sass");
.pipe(sass())
(2)less
less = require("gulp-less");
.pipe(less())
12、js代码检查
比如:
jshint = require("gulp-jshint");
.pipe(jshint())
.pipe(jshint.reporter('default'))
// npm install --save-dev jshint-stylish
.pipe(jshint.reporter('jshint-stylish'))
14、自动刷新
比如:
browserSync = require("browser-sync").create(),
reload = browserSync.reload; // 自动刷新
gulp.task("browser-sync", function() {
browserSync.init(resource.html, {
server: {
baseDir: ["."], //or [,,,,,],
index: "build/index.html"
}
});
});
15、加载插件+重命名
var plugins = require("gulp-load-plugins")({
rename: {
"gulp-make-css-url-version": "cssver",
"gulp-content-includer": "includer",
"gulp-html-extend": "htmlextend",
"gulp-minify-css": "minicss",
"gulp-rev-append": "revap"
}
});
15、notify:消息提示
.pipe(plugins.notify({ message: 'Styles task complete' }));
16、rename:重命名
.pipe(plugins.rename({suffix: '.min'}))
17、changed: 编译或打包改变过的文件
.pipe(plugins.changed(dist, {extension: ".js"}))