【笔记】Gulp学习笔记

发表于 更新于 阅读次数：

前言

A toolkit to automate & enhance your workflow（官网）

下载依赖

1
npm install -D gulp

通过配置Gulp配置文件定义任务

  • 结束任务的条件：返回callback、stream、promise、event emitter、child process、observable任意一种
gulpfile.js
1
2
3
4
5
6
7
8
9
10
function fn(callback) {

  ...

  callback();
}

module.exports = {
  fn
};

串行任务

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const gulp = require("gulp");

function fn1(callback) {
  callback();
}
function fn2(callback) {
  callback();
}

const fn = gulp.series(fn1, fn2);

module.exports = {
  fn
};

并行任务

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const gulp = require("gulp");

function fn1(callback) {
  callback();
}
function fn2(callback) {
  callback();
}

const fn = gulp.parallel(fn1, fn2);

module.exports = {
  fn
};

流式处理文件并输出到目标目录

*：通配符匹配单个任意字符
**：通配符匹配任意个任意字符

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
const gulp = require("gulp");

function fn() {
  return gulp
      .src("./src/**/*.js")
      .pipe(gulp.dest("./dist"));
}

module.exports = {
  fn
};

监听文件变化自动执行任务

gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
const gulp = require("gulp");

function fn() {
  return gulp
      .src("./src/**/*.js")
      .pipe(gulp.dest("./dist"))
}
gulp.watch("./src/**/*.js", fn);

module.exports = {
  fn
}

根据配置文件执行任务

执行指定任务

1
npx gulp fn

执行默认任务

1
npx gulp default
  • 简写
1
npx gulp

完成