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"
},
最终效果
4、执行命令
npm run gulpTest
以上步骤就简单构建了gulp的最基本框架
二、任务
1、task() - 方法用来将函数注册为任务
2、series() - 让task任务按顺序执行
3、parallel() - 以最大并发运行任务tasks
旧版 gulp.task(name[, deps], fn) 方法用来将函数注册为任务(task)。该 API 依旧可以使用,但是 导出(export)将会是主要的注册机制
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
三、异步执行
当从任务(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
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文件
五、文件监控
1、gulp.watch的两种使用方法
2、使用插件gulp-watch监听-不建议,应该使用新的,可以参考
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系统下报错