gulp入门

obeckham

        gulp是基于Nodejs的自动化任务工具，类似java中的ant，结合相关插件可方便的完成javascript/coffee/sass/less/html/image/css等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。很好的利用了Nodejs的Stream和pipe，前一级输出直接为后一级的输入，操作非常方便。在前端主要有以下用途：



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串行执行有问题。



来自为知笔记(Wiz)