gulp API:task、src、dest、watch
gulp.task(name[, deps], fn)该方法用于定义一个gulp任务。
name 任务名称,不能包含空格
deps 该任务依赖的任务,依赖任务的执行顺序跟在deps中声明的顺序一致
fn 该任务调用的插件操作
gulp.src(globs[, options]) 方法是指定需要处理的源文件的路径,gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,gulp.src返回当前文件流至可用插件.
globs 需要处理的源文件匹配符路径
options 有3个属性buffer、read、base
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文件);
options 的三个属性说明:
options.buffer : 类型: Boolean 默认:true 设置为false,将返回file.content的流并且不缓冲文件,处理大文件时非常有用;
options.read : 类型: Boolean 默认:true 设置false,将不执行读取文件操作,返回null;
options.base : 类型: String 设置输出路径以某个路径的某个组成部分为基础向后拼接
gulp.dest(path[, options]) dest() 方法是指定处理完后文件输出的路径;
path 指定文件输出路径,或者定义函数返回文件输出路径亦可
options 有2个属性cwd、mode
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) watch() 方法是用于监听文件变化,文件一修改就会执行指定的任务.
glob 需要处理的源文件匹配符路径
opts 具体参看 https://github.com/shama/gaze ;
tasks 需要执行的任务的名称数组
cb(event) 每个文件变化执行的回调函数 每当监视的文件发生变化时,就会调用 cb 函数,并且会给它传入一个对象,该对象包含了文件变化的一些信息:
type :属性为变化的类型,可以是 added , changed , deleted
path :属性为发生变化的文件的路径
gulp的常用插件
gulp-uglify 使用gulp-uglify压缩javascript文件,减小文件大小。
gulp-rename 用来重命名文件流中的文件。用 gulp.dest() 方法写入文件时,文件名使用的是文件流中的文件名,如果要想改变文件名,那可以在之前用 gulp-rename 插件来改变文件流中的文件名。
gulp-minify-css 压缩css文件时并给引用url添加版本号避免缓存:
gulp-htmlmin 使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作。
gulp-concat 用来把多个文件合并为一个文件,我们可以用它来合并js或css文件等,这样就能减少页面的http请求数了.
gulp-imagemin :压缩图片文件
gulp-jshint :侦测javascript代码中错误和潜在问题的工具
gulp的问题和缺陷
问题很难定位,运行中间没有办法debug,console.log() 也不能很好的定位问题。
task串行执行有问题。