随笔

Gulp基本用法

Gulp 是一个模块化打包工具。
Gulp 本身只有几个入口，支持他拥有强大功能的是各种各样的插件。
Gulp 使用非常简单，只需要一个一个任务链式执行就可以了.

gulp 的用法

在项目根目录下创建一个gulpfile.js或Gulpfile.js文件，文件内容就是对应的编译任务和方法。
最终通过module.exports或exports.default导出。
实际上，其导出方式其实就是nodejs的commonjs的导出语法。
因此，可以直接创建一个名为gulpfile.js的文件夹，内部含一个index.js也是可行的。

gulp 基本语法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const { src, dest } = require('gulp');
// gulp-babel 和 gulp-uglify 为 gulp 的插件。
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

exports.default = function() {
  // src 内部包含需要参与构建的文件，支持 *.xx **/*.xx 的模糊匹配
  return src('src/*.js')
    .pipe(babel())
    // pipe 管道，表示将上一层的处理结果传入下层，比如此处就是将 babel 的处理结果传入后面进行 uglify 混淆。
    .pipe(uglify())
    // dest 表示将构建的内容输出到哪里
    .pipe(dest('output/'));
}

构建的串行和并行

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const { series, parallel } = require('gulp');
// 异步任务，参数为回调函数。
function jsMinify(cb) {
  // 任务的具体处理方法
  cb();
}
function cssMinify(cb) {
  cb();
}
function publish(cb) {
  cb();
}
// series 表示串行执行任务
exports.seriesBuild = series(cssMinify, jsMinify)
// parallel 表示并行执行任务
exports.parallelBuild = parallel(cssMinify, jsMinify)
// 串行和并行混合执行
exports.build = series( parallel(cssMinify, jsMinify), publish);

watch 文件监听

1
2
3
4
// 当被监听文件有修改的时候触发回调函数，在回调里面执行相应的任务，比如文件修改之后重新编译。
gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

gulp 插件

gulp 本身没有多少功能，绝大部分功能都来自于其插件。
下面是一些常用的插件。

1
2
3
4
5
6
7
gulp-change 过滤掉未改过的文件
gulp-typescript ts编译插件
gulp-if 条件判断插件
gulp-image 压缩图片
gulp-mp-npm 微信小程序提取npm依赖包的插件
gulp-ts-alias 处理tsconfig中的别名
gulp-pretty-data 压缩美化xml, json, css, sql

更多插件可查看官方插件文档

以上为 gulp 最基本的用法，如果需要进阶使用建议查看官方文档。
附录为中文文档。

相关链接

gulpjs中文官网

2023年03月31日更新