gulp入门

时间:2023-03-09 17:13:39
gulp入门

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

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