安装
$ npm install --global gulp-cli
$ npm install --save-dev gulp
具体新建项目步骤:https://gulpjs.com/docs/en/getting-started/quick-start
配置文件
文件名称 gulpfile.js (或者Gulpfile.js)
如果需要不同模块化打包?
- 对于TypeScript,重命名
gulpfile.ts
并安装ts节点模块。 - 对于Babel,重命名
gulpfile.babel.js
并安装@ babel / register模块。
大多数新版本的节点都支持TypeScript或Babel提供的大多数功能,但import
/ export
syntax 除外。如果只需要该语法,请重命名gulpfile.esm.js
并安装esm模块。
提示: 每个任务都可以拆分成自己的文件,然后导入到gulpfile中进行合成。允许您将
gulpfile.js
文件替换为名为gulpfile.js
包含index.js
被视为a 的文件的目录gulpfile.js
创建任务
- 公共任务从gulpfile导出,允许它们由
gulp
命令运行。 - 私人任务在内部使用,通常用作部分
series()
或parallel()
组合。
series():
要按顺序执行任务,请使用该series()
方法。
parallel() :对于以最大并发性运行的任务,请将它们与parallel()
方法结合使用。
const { series, parallel } = require('gulp');
function clean(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
function javascript(cb) {
// body omitted
cb();
}
/**
*1.先执行clean
*2.并发执行css,js任务
**/
exports.build = series(clean, parallel(css, javascript));
异步
gulp中task都是的异步任务
error-first callbacks (callback回调函数)
如果您的任务没有返回任何内容,则必须使用错误优先回调来表示完成, cb的参数只有一个Error
function callbackTask(cb) {
// `cb()` should be called by some async work
cb(new Error('kamoo'));
}
exports.default = callbackTask;
Returning a stream(stream流)
const { src, dest } = require('gulp');
function streamTask() {
return src('*.js')
.pipe(dest('output'));
}
exports.default = streamTask;
Returning a promise (promise 异步)
function promiseTask() {
return Promise.resolve('the value is ignored');
}
exports.default = promiseTask;
Returning a child process (子进程)
const { exec } = require('child_process');
function childProcessTask() {
return exec('date');
}
exports.default = childProcessTask;
Returning an observable (rxjs 结合使用)
const { Observable } = require('rxjs');
function observableTask() {
return Observable.of(1, 2, 3);
}
exports.default = observableTask;
Using async/await
const fs = require('fs');
async function asyncAwaitTask() {
const { version } = fs.readFileSync('package.json');
console.log(version);
await Promise.resolve('some result');
}
exports.default = asyncAwaitTask;
文件操作
src() : 读取 匹配规则的文件转换成 stream
dest() : 输出的目录
三种模式
文件匹配符号
无论操作系统如何\\
。在glob中,\\
保留为转义字符
- 默认模式,并将文件内容加载到内存中。插件通常以默认模式运行,许多插件不支持流模式。
- Stream模式主要用于操作无法容纳在内存中的大文件,如图片或电影。Stream模式主要用于操作无法容纳在内存中的大文件,如巨型图像或电影。
- 空模式不包含任何内容,仅在处理文件元数据时很有用.
'glob_with_uncommon_\\*_character.js'
避免使用Node.js的path.join、__dirname、__filename、process.cwd()处理
*(单星号) : 匹配0~n个字符
匹配文件index.js
,但不匹配scripts/index.js
或像scripts/nested/index.js
'*.js'
**(多星号) : 匹配0~n个字符,支持跨段
会匹配文件scripts/index.js
,scripts/nested/index.js
和scripts/nested/twice/index.js
'scripts/**/*.js'
!(取反) :不匹配规则
匹配文件scripts/**/*.js
,但不匹配scripts/vendor/**/*.js
['scripts/**/*.js', '!scripts/vendor/**']
删除重复匹配的规则
使用插件
- gulp-rename : 修改文件名
- gulp-uglify :压缩代码
- gulp-if : 插件的使用中加入判断条件
- through2:再修改第三方插件请客下,使用自定义插件(inline plugin)
实时转换
watch()
const { watch, series } = require('gulp');
function clean(cb) {
// body omitted
cb();
}
function javascript(cb) {
// body omitted
cb();
}
function css(cb) {
// body omitted
cb();
}
exports.default = function() {
// You can use a single task
watch('src/*.css', css);
// Or a composed task
watch('src/*.js', series(clean, javascript));
};
配置参数
-
events: 监听变化事件
-
ignoreInitial :忽略初始化状态
- queue :保证不会同时执行task
- delay : 延迟执行
详细案例: https://gulpjs.com/docs/en/getting-started/watching-files