13518219792
一、gulp API 简介
创新互联建站专注于企业成都全网营销、网站重做改版、沁源网站定制设计、自适应品牌网站建设、H5响应式网站、成都商城网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为沁源等各大城市提供网站开发制作服务。
gulp 本身能做的事情非常少，主要是通过插件来提供各种功能，gulp 本身只提供了4个非常简洁的 API, 掌握这4个 API 你就基本掌握了 gulp 的全部。
1、gulp.src(globs[, options])
2、gulp.dest(path[, options])
3、gulp.task(name[, deps], fn)
4、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
二、gulp.src(globs[, options])
说明：返回当前指定文件流至可用插件。
globs：需要处理的源文件匹配符路径。类型(必填)：String or StringArray。
通配符路径匹配示例：
1、"src/index.js": 指定具体文件；
2、"{}": 匹配多个属性。例：src/{a,b}.js(包含 a.js 和 b.js 文件) src/*.{jpg,png,gif}(包含 src 下的所有 jpg/png/gif 文件)；
3、"!": 排除指定文件。例：!src/index.js(不包含 src 下的 index.js 文件)；
4、"*.scss": * 号匹配当前目录任意文件，所以这里 *.scss 匹配当前目录下所有 scss 文件；
5、"**/*.scss": 匹配当前目录及其子目录下的所有 scss 文件；
6、"*.+(scss|sass)": + 号后面会跟着圆括号，里面的元素用 | 分割，匹配多个选项。这里将匹配 scss 和 sass 文件;
options：类型(可选)：Object，有3个属性 buffer、read、base。
1、options.buffer：类型：Boolean 默认：true 设置为 false，将返回 file.content 的流并且不缓冲文件，处理大文件时非常有用；
2、options.read：类型：Boolean 默认：true 设置 false，将不执行读取文件操作，返回null；
3、options.base：类型：String 设置输出路径以某个路径的某个组成部分为基础向后拼接；
示例：
gulp.src(['js/*.js','css/*.css','*.html']) // 使用数组的方式来匹配多种文件
gulp.src(['src/*.js','!src/b*.js']) // 匹配所有js文件，但排除掉以 b 开头的 js 文件gulp.src(['!src/b*.js','src/*.js']) // 不会排除任何文件，因为排除模式不能出现在数组的第一个元素中
gulp.src('src/js/**/*.js', { base: 'src' }) // 保留 src 路径后的所有路径名称
gulp.src(['less/**/*.less','!less/{extend,page}/*.less']) // 匹配 less 目录下和子目录下的所有 less 文件，但排除 less 目录下 extend 和 page 目录下的所有 less 文件
三、gulp.dest(path[, options])
说明：dest 方法是指定处理完后文件输出的路径。
path： 类型(必填)：String or Function 指定文件输出路径，或者定义函数返回文件输出路径亦可。
options：类型(可选)：Object，有2个属性 cwd、mode。
1、options.cwd：类型：String 默认：process.cwd()：前脚本的工作目录的路径，只在所给的输出目录是相对路径时候有效；
2、options.mode：类型：String 默认：0777 指定被创建文件夹的权限；
PS：我们给 gulp.dest() 传入的路径参数，只能用来指定要生成的文件的目录，而不能指定生成文件的文件名，它生成文件的文件名使用的是导入到它的文件流自身的文件名，所以生成的文件名是由导入到它的文件流决定的，即使我们给它传入一个带有文件名的路径参数，然后它也会把这个文件名当做是目录名。要想改变文件名，可以使用 gulp-rename 插件。
示例：
// 最终生成的文件路径为 dist/foot.js/jquery.js，而不是 dist/foot.js
gulp.src('script/jquery.js')
.pipe(gulp.dest('dist/foot.js'));
// 最后生成的文件路径为 dist/**/*.js
// 如果 **/*.js 匹配到的文件为 jquery/jquery.js ,则生成的文件路径为 dist/jquery/jquery.js
gulp.src('script/**/*.js') // 有通配符开始出现的那部分路径为 **/*.js
.pipe(gulp.dest('dist'));
// 最后生成的文件路径为 dist/avalon.js
gulp.src('script/avalon/avalon.js') // 没有通配符出现的情况
.pipe(gulp.dest('dist'));
// 假设匹配到的文件为 script/util/underscore.js
// 则最后生成的文件路径为 dist/util/underscore.js
gulp.src('script/**/underscore.js') // 有通配符开始出现的那部分路径为 **/underscore.js
.pipe(gulp.dest('dist'));
// 假设匹配到的文件为 script/zepto.js
//则最后生成的文件路径为 dist/zepto.js
gulp.src('script/*') // 有通配符出现的那部分路径为 *
.pipe(gulp.dest('dist'));
//设该模式匹配到了文件 app/src/css/normal.css
// 用 dist 替换掉 base 路径，最终得到 dist/css/normal.css
gulp.src('app/src/**/*.css') // 此时 base 的值为 app/src,也就是说它的 base 路径为 app/src .pipe(gulp.dest('dist'));
// 假设匹配到的文件为 script/lib/jquery.js
// 生成的文件路径为 build/jquery.js
gulp.src('script/lib/*.js') // 没有配置 base 参数，此时默认的 base 路径为 script/lib
.pipe(gulp.dest('build'));
// 假设匹配到的文件为 script/lib/jquery.js
// 此时生成的文件路径为 build/lib/jquery.js
gulp.src('script/lib/*.js', {base:'script'}) // 配置了 base 参数，此时 base 路径为 script
.pipe(gulp.dest('build'));
四、gulp.task(name[, deps], fn)
说明：task 方法定义一个 gulp 任务。
name：类型(必填)：String，指定任务的名称（不应该有空格）。
deps：类型(可选)：StringArray，该任务依赖的任务（注意：被依赖的任务需要返回当前任务的事件流），为一个数组。当前定义的任务会在所有依赖的任务执行完毕后才开始执行。如果没有依赖，则可省略这个参数。
fn：类型(必填)：Function，该任务调用的插件操作。
示例：
// 定义一个没有依赖的任务
gulp.task('css', function () {
return gulp.src(['less/style.less'])
.pipe(less())
.pipe(gulp.dest('./css'));
});
// 定义一个有依赖的任务
gulp.task('mincss', ['css'], function () { // 执行完 css 任务后再执行 mincss 任务
return gulp.src(['css/*.css'])
.pipe(minifyCss())
.pipe(gulp.dest('./dist/css'));
});
// 定义一个有多个依赖的默认任务
gulp.task('default', ['css','concat','minifyCss']); // 只要执行 default 任务就相当于把 "css"，"concat"，"minifyCss" 这三个任务都执行了
五、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
说明：watch 方法是用于监听文件变化，文件一修改就会执行指定的任务。
glob：需要处理的源文件匹配符路径。类型(必填)：String or StringArray。
opts：类型(可选)：Object，为一个可选的配置对象，通常不需要用到。
tasks：类型(必填)：StringArray，需要执行的任务的名称数组。
cb(event)：类型(可选)：Function 每个文件变化执行的回调函数。每当监视的文件发生变化时，就会调用这个函数,并且会给它传入一个对象，该对象包含了文件变化的一些信息，type 属性为变化的类型，可以是 added, changed, deleted；path 属性为发生变化的文件的路径。
示例：
gulp.task('watch-less', function () {
gulp.watch('less/**/*.less', ['css']);
});
gulp.task('watch-js', function () {
gulp.watch('js/**/*.js', function (event) {
// 输出发生改变文件的一些信息
console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});
});
