1>基础知识
gulp是基于流的自动化构建工具,在gulp中,首先通过gulp.src()方法获取要处理的文件流,然后把文件流通过pipe方法导入到gulp插件中,最后把经过插件处理后的流再通过pipe方法导入到gulp.dest()中,gulp.dest()方法则把流中的内容写入到文件中,以流为媒介它不需要频繁的生成临时文件,这也是使用gulp的一个原因。
2>作用
它能够对网站资源进行优化,还可以提高我们的工作效率,能够自动完成js,css,html,sass,Less,image,coffee等文件的测试,检查,合并,压缩,格式化,浏览器自动刷新,部署文件生成,并监听文件在改动或重复指定的这些步骤。
3>安装
确保正确安装了node环境
1》全局安装gulp
npm install gulp -g
2》局部安装,把目录切换到你的项目中,可以写入package.json文件的依赖上(加--save-dev)
npm install gulp --save-dev
4>globs的匹配规则
* 匹配文件路径中的0个或多个字符,但不会匹配路径分隔符,除非路径分隔符出现在末尾
** 匹配路径中的0个或多个目录及其子目录,需要单独出现,即它左右不能有其他东西了。如果出现在末尾,也能匹配文件。
? 匹配文件路径中的一个字符(不会匹配路径分隔符)
[...] 匹配方括号中出现的字符中的任意一个,当方括号中第一个字符为^或!时,则表示不匹配方括号中出现的其他字符中的任意一个,类似js正则表达式中的用法
!(pattern|pattern|pattern) 匹配任何与括号中给定的任一模式都不匹配的
?(pattern|pattern|pattern)匹配括号中给定的任一模式0次或1次
+(pattern|pattern|pattern) 匹配括号中给定的任一模式至少1次
*(pattern|pattern|pattern) 匹配括号中给定的任一模式0次或多次
@(pattern|pattern|pattern) 匹配括号中给定的任一模式1次
5>特点
1)易于使用: 通过代码优于配置的策略,gulp 让简单的任务简单,复杂的任务可管理。
2)构建快速:利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
3)易于学习:通过最少的 API,掌握 gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。
4)插件高质: gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
6>API
1》src:获取流
注意:这个流里的内容不是原始的文件流,而是一个虚拟文件对象流它储存着原始文件的路径,文件名,内容等信息。
语法:gulp.src(globs,[,options])
globs:文件匹配模式(类似正则表达式),用来匹配文件的路径,当有多个匹配模式时,参数可以为一个数组;参数类型为:String或Array
options:可选参数,它的参数为
options.buffer->类型: Boolean 默认值: true。
如果该项被设置为 false,那么将会以 stream 方式返回 file.contents 而不是文件 buffer 的形式。这在处理一些大文件的时 候将会很有用。
注意:插件可能并不会实现对 stream 的支持。
options.read->类型: Boolean 默认值: true
如果该项被设置为 false, 那么 file.contents 会返回空值(null),也就是并不会去读取文件。
options.base->类型: String
设置输出路径以某个路径的某个组成部分为基础向后拼接。
在路径为client/js/somedir的目录中,有一个文件叫somefile.js
gulp.src('client/js/**/*.js')//匹配client/js/somedir/somefile.js现在‘base’值为‘client/js’
.pipe(minify())
.pipe(gulp.dest('build'));//写入build/somedir/somefile.js,将client/js替换成build
gulp.src('client/js/**/*.js',{base:'client'})
.pipe(minify())
.pipe(gulp.dest('build'));//build/js/somedir/somefile.js,将client替换成build
2》dest:写文件
语法:gulp.dest(path[,options])
path:写文件的路径
options:可选参数,它的参数为
options.cwd->类型: String 默认值: process.cwd().
输出目录的 cwd 参数,只在所给的输出目录是相对路径时候有效。
options.mode->类型: String 默认值: 0777.
八进制权限字符,用以定义所有在输出目录中所创建的目录的权限.
3》watch:监听文件
监听文件的变化,当文件变化后,可以应用它来执行相应的任务,例如文件压缩
语法:gulp.wacth(glob[,opts],tasks)
glob:要监视的文件匹配模式
opts:一个可选的配置对象
tasks:文件变化后要执行的任务,为一个数组
4》task:定义任务
语法:gulp.task(name[,deps],fn)
name:任务名
deps :是当前定义的任务需要依赖的其他任务,为一个数组。当前定义的任务会在所有依赖的
任务执行完毕后才开始执行。如果没有依赖,则可省略这个参数;
fn:任务函数,可选
控制任务的执行顺序,可以通过任务依赖来实现。
例如:我想要执行one,two,three这三个任务,那我们就可以定义一个空的任务,然后把那三个任务当做这个空的任务的依赖就行了:
//只要执行default任务,就相当于把one,two,three这三个任务执行了
gulp.task('default',['one','two','three']);