Gulp自动化构建工具详解-优快云博客

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']);

gulp自动化构建工具