gulp的基本使用
1、gulp官网
2、gulp的使用以及Gulp新手入门教程
3、gulp构建项目系列文章
4、--------重要------【微信小程序】- 用Gulp搭建微信小程序项目
一、基本使用
1、dev环境安装gulp
npm install --save-dev gulp
或者指定版本配置
"devDependencies": {
"gulp": "^4.0.2"
},
2、创建gulpfile.js文件，执行gulp命令是会查找该文件运行
function defaultTask(cb) {
console.log('----------------启动gulp任务----------------');
// place code for your default task here
cb();
}
exports.default = defaultTask;
3、创建运行命令， gulp默认执行 gulpfile.js 的exports.default命令
"scripts": {
"gulpTest": "gulp"
},
最终效果
image.png
4、执行命令
npm run gulpTest
image.png
以上步骤就简单构建了gulp的最基本框架
二、任务
1、task() - 方法用来将函数注册为任务
2、series() - 让task任务按顺序执行
3、parallel() - 以最大并发运行任务tasks
旧版 gulp.task(name[, deps], fn) 方法用来将函数注册为任务（task）。该 API 依旧可以使用，但是 导出（export）将会是主要的注册机制
image
1、package.json文件修改gulpTset命令为
"scripts": {
"gulpTest": "gulp dev"
},
2、gulpfile.js创建dev任务
const { task, series, parallel } = require('gulp');
function clean(cb) {
console.log('---------clean任务---------');
cb();
}
function css(cb) {
console.log('---------css任务---------');
cb();
}
function javascript(cb) {
console.log('---------javascript任务---------');
cb();
}
exports.dev = series(clean, parallel(css, javascript));
// exports等价于task
// task('dev', series(clean, parallel(css, javascript)));
3、执行npm run gulpTest
image.png
三、异步执行
当从任务（task）中返回 stream、promise、event emitter、child process 或 observable 时，成功或错误值将通知 gulp 是否继续执行或结束。如果任务（task）出错，gulp 将立即结束执行并显示该错误。
当使用 series() 组合多个任务（task）时，任何一个任务（task）的错误将导致整个任务组合结束，并且不会进一步执行其他任务。当使用 parallel() 组合多个任务（task）时，一个任务的错误将结束整个任务组合的结束，但是其他并行的任务（task）可能会执行完，也可能没有执行完。
四、处理文件
1、src(glob参数 [,options]) - 读取文件生成一个流（stream）
注意：
-
globs是字符串或数组，表示待处理文件的路径，注意该路径相对于gulpfile.js所在位置
-
globs写法中，“app/**/*.js”表示app目录下的任意子目录下的后缀为js的所有文件
-
options配置中最常用的是base:'文件路径'，指定与不指定base的区别在于处理后的文件的位置。请看下图：写了base 会只删掉client保留了js
image
2、pipe() - 用于连接转换流或可写流
3、dest(输出路径path [,options]) -
接受一个输出目录作为参数，当接收到管道（pipeline）传输的文件时，将文件内容及文件属性写入到指定的目录中
1、path可以是路径字符串或函数，当是函数时，该函数必须返回字符串
2、options可配置cwd和mode，用得不多
PS:大多数情况下，利用 .pipe() 方法将插件放置在 src() 和 dest() 之间，并转换流（stream）中的文件
四、Glob 详解
1、glob 是由普通字符和/或通配字符组成的字符串，用于匹配[文件路径]，可以利用一个或多个 glob 在文件系统中定位文件
2、globs是字符串或数组，表示待处理文件的路径，注意该路径相对于gulpfile.js所在位置
*.js ：在一个字符串匹配任意数量的字符,用于匹配【单级目录】下的文件
例子：*.js
能够匹配类似 单级index.js，但不能匹配 scripts/index.js 或 scripts/nested/index.js
**/*.js ：匹配当前目录及其子目录下的所有js文件, 用于匹配【嵌套目录】下的文件
例子：scripts/**/*.js
被适当地限制在 scripts/ 目录下。它将匹配类似 scripts/index.js、scripts/nested/index.js 和 scripts/nested/twice/index.js
! (取反)
取反必须跟在一个非取反的 glob 后面。第一个 glob 匹配到一组匹配项，然后后面的取反 glob 删除这些匹配项中的一部分
例子：
['script/**/*.js', '!scripts/vendor/']
['**/*.js', '!node_modules/']
*.+(scss|sass) ：+号后面会跟着圆括号，里面的元素用|分割，匹配多个选项。这里将匹配scss和sass文件
五、文件监控
watch()将globs 与 任务（task）进行关联。它对匹配 glob 的文件进行监控，文件被修改了就执行关联的任务（task）
gulp.watch(glob [, opts], tasks) 或 gulp.watch(glob [, opts, cb])
监听文件，一旦文件发生改变就会执行tasks数组中指定的任务，或者执行cb函数，并触发watcher的change事件
可监控的事件
默认只有创建、更改或删除文件监控程序就会执行关联的任务， 其他可通过 events 参数指定，事件有 'add'、'addDir'、'change'、'unlink'、'unlinkDir'、'ready'、'error'。
此外，还有一个 'all' 事件，它表示除 'ready' 和 'error' 之外的所有事件
gulp-watch使用说明及要求
1）尽可能的将监听任务拆开
2）减少开发模式下的功耗：比如不进行压缩处理，特别是图片的压缩需要时间较长,这就需要判断当前是开发环境还是生产环境
监控page下面所有js文件，有变化就执行jsChange方法
const { task, series, parallel, watch } = require('gulp');
function clean(cb) {
console.log('---------clean任务---------');
cb();
}
function jsChange() {
console.log('---------jsChange---------');
}
/**
* 监控page下面所有js文件的增删改
*/
function watchPage() {
console.log('---------watchPage---------');
// 监控page下面所有js文件的增删改
let watcher = watch('pages/**/*.js', () => {
console.log('---------watch回调，在change add unlink执行完回调--------');
});
// 修改触发
watcher.on('change', function(filepath) {
console.log('---------修改触发:', filepath);
});
// 添加触发
watcher.on('add', function(filepath) {
console.log('---------添加触发:', filepath);
});
// 删除触发
watcher.on('unlink', function(filepath) {
console.log('---------删除触发:', filepath);
});
return watcher;
}
task('dev', series(clean, parallel(jsChange, watchPage)));
六、插件
Gulp 插件实质上是Node 转换流，它封装了通过管道（pipeline）转换文件的常见功能，通常是使用 .pipe() 方法并放在 src() 和 dest() 之间。可以更改经过流（stream）的每个文件的文件名、元数据或文件内容
可以在 插件搜索页面 搜索需要的插件。
插件应当总是用来转换文件的。其他操作都应该使用（非插件的） Node 模块或库来实现。
1、gulp简单插件
gulp-imagemin 压缩图片
gulp-sass 将scss文件转为css
gulp-postcss 与autoprefixer配合使用
gulp-open 默认浏览器打开指定页面
gulp-htmlmin 最小化html文件
gulp-minify-css 最小化css（gulp-clean-css也是）
gulp-uglify 混淆js文件
gulp-concat 合并js,css文件
2、复杂插件
gulp-replace 对指定文件内容进行替换，可以用正则
gulp-usemin 将html中外链的css和js文件
gulp-zip 将文件打包成zip
gulp-sequence 串行执行任务，相对于gulp.task中依赖的任务是并行执行的
gulp-rev-all 对js或css文件加MD5戳，缓存用
3、其他node模块
del 删除指定目录下所有文件
autoprefixer 自动加浏览器前缀
browser-sync 文件内容变化浏览器自动刷新
yargs 处理node命令传入的参数
cross-env 跨platform的命令处理，用法：cross-env NODE_ENV=production webpack --config build/webpack.config.js，若不加cross-env，window系统下报错
网友评论