gulp4快速入门

安装gulp命令行工具

npm install global gulp-cli
npx mkdir demo
cd demo
npm init

View Code

安装gulp

npm i -D gulp
gulp --version

View Code

创建gulpfile.js

function defaultTask(cb) {
  cb()
}

exports.default = defaultTask

View Code

测试

gulp

View Code

gulpfile

　　运行gulp命令时文件会自动加载，核心API，src()，dest()，series()，parallel()

创建任务

　　每个gulp任务都是一个异步的JS函数，此函数可以接受callback作为参数的函数，或者是一个返回stream，promise等类值函数

　　公开任务

　　　　从gulpfile中被导出（export），可以通过gulp命令直接调用

　　私有任务

　　　　被设计为内部使用，通常为series或者parallel组合的组成部分

const { series } = require('gulp')

// 私有任务， 可以用被用在series()组合中
const clean = function(cb) {
  console.log('clean')
  cb()
}
// 公共任务， 函数通过export导出，因此可以通过gulp调用，当然也可以被用在series()组合中
const build = function(cb) {
  console.log('build')
  cb()
}

exports.build = build
exports.default = series(clean, build)

// console
// gulp build
// gulp

View Code

组合任务

　　gulp提供2个组合方法：series()和parallel()

　　series：让任务按顺序执行

　　parallel：希望以最大并发来运行任务

　　这2个组合方法可以互相嵌套，可以嵌套任意深度

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

function clean(cb) {
  console.log('clean')
  cb();
}

function cssTranspile(cb) {
  console.log('cssTranspile')
  cb();
}

function cssMinify(cb) {
  console.log('cssMinify')
  cb();
}

function jsTranspile(cb) {
  console.log('jsTranspile')
  cb();
}

function jsBundle(cb) {
  console.log('jsBundle')
  cb();
}

function jsMinify(cb) {
  console.log('jsMinify')
  cb();
}

function publish(cb) {
  console.log('publish')
  cb();
}

exports.build = series(
  clean,
  parallel(
    cssTranspile,
    series(jsTranspile, jsBundle)
  ),
  parallel(cssMinify, jsMinify),
  publish
)

View Code

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

const clean = function(cb) {
  console.log('clean')
  cb()
}

const css = function(cb) {
  console.log('css')
  cb()
}

const script = function(cb) {
  console.log('script')
  cb()
}

exports.build = series(clean, parallel(css, script))

View Code

任务通知

　　series()组合多个任务时，任何一个错误会导致整个任务组合结束，并且不会进一步执行其他任务

　　paralle()与之相反，任何一个错误不会导致整个任务组合结束，其他任务可能执行完毕，也可能没执行完

处理文件

　　src()接收glob参数并从文件系统中读取文件然后生成一个Node流

　　src()产生的流应当从任务中返回并发出异步完成的信息

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

exports.default = () => (
  src('./src/**/*.js')
    .pipe(dest('dist/'))
)

View Code

Glob详解

　　glob是由普通字符和通配字符组成的字符串

　　特殊字符

　　　　*：一个星号

　　　　**：二个星号

　　　　!：取反

'*.js'
'scripts/**/*.js'
['script/**/*.js', '!scripts/vendor/']

View Code

文件监控

　　watch()的方法利用文件系统的监控程序将blobs和任务进行关联

　　对匹配的glob文件进行监控，如果文件被修改那么被关联的任务将会执行

　　被执行的任务没有触发异步完成信号，它将永远不会再次运行

const { watch, series } = require('gulp');

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

function javascript(cb) {
  // body omitted
  cb();
}

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

// 可以只关联一个任务
watch('src/*.css', css);
// 或者关联一个任务组合
watch('src/*.js', series(clean, javascript));

View Code