本节简要介绍一下 Gulp 中的常用 API。

src

src 方法用于读取文件，可以使用 glob 语法来匹配文件。

const { src, dest } = require('gulp')

function defaultTask() {
  return src('src/*.js')
    .pipe(dest('output/'))
}

exports.default = defaultTask

dest

dest 方法用于写入文件，可以指定写入的目录。

const { src, dest } = require('gulp')

function defaultTask() {
  return src('src/*.js')
    .pipe(dest('output/'))
}

exports.default = defaultTask

series

series 方法用于串行执行任务，即一个任务执行完毕后，再执行下一个任务。

const { series } = require('gulp')

function clean(cb) {
  // body omitted
  cb()
}

function js(cb) {
  // body omitted
  cb()
}

function css(cb) {
  // body omitted
  cb()
}

function html(cb) {
  // body omitted
  cb()
}

exports.build = series(
  clean,
  js,
  css,
  html
)

parallel

parallel 方法用于并行执行任务，即多个任务同时执行。

const { series, parallel } = require('gulp')

function clean(cb) {
  // body omitted
  cb()
}

function js(cb) {
  // body omitted
  cb()
}

function css(cb) {
  // body omitted
  cb()
}

function html(cb) {
  // body omitted
  cb()
}

exports.build = series(clean, parallel(js, css, html))

watch

watch 方法用于监听文件变化，当文件发生变化时，可以执行对应的任务。

const { watch } = require('gulp')

function watchTask() {
  watch('js/*.js', js)
  watch('styles/*.*', css)
  watch('*.html', html)
  watch('images/*.{jpg,png}', image)
}

exports.watch = watchTask

task

task 方法用于注册任务。

const { task } = require('gulp')

task('clean', function(cb) {
  // body omitted
  cb()
})

task('js', function(cb) {
  // body omitted
  cb()
})

task('css', function(cb) {
  // body omitted
  cb()
})

task('html', function(cb) {
  // body omitted
  cb()
})

exports.build = series(clean, parallel(js, css, html))

lastRun

lastRun 方法用于获取上一次任务执行的时间。

当与 src() 组合时，通过跳过自上次成功完成任务以来没有更 改的文件，使增量构建能够加快执行时间。

const { src, dest, lastRun, watch } = require('gulp')
const imagemin = require('gulp-imagemin')

function images () {
  return src('src/images/**/*.jpg', { since: lastRun(images) })
    .pipe(imagemin())
    .pipe(dest('build/img/'))
}

exports.default = function () {
  watch('src/images/**/*.jpg', images)
}

symlink

symlink 方法用于创建一个符号链接。

const gulp = require('gulp')
const symlink = require('gulp-symlink')

gulp.task('create-symlink', () => {
  return gulp.src('src/file.js')
    .pipe(symlink('dist/file.js'))
})

在本例中，我们创建了一个指向 src/file.js 的 symlink，并将其命名为 dist/file.js。

这将在 dist 目录下创建一个名为 file.js 的快捷方式，指向 src/file.js。