gulp4用法

gulp4用法

gulp4文档
gulp中文文档 旧文档，未同步翻译仅参考

安装

删除旧版本
npm rm --global gulp

检查node,npm,npx
node --version
npm --version
npx --version

安装gulp-cli
npm install --global gulp-cli

创建项目
npx mkdirp my-project
cd my-project

初始化项目
npm init

在开发环境中安装gulp包
npm install --save-dev gulp

检查gulp版本
gulp --version

在项目目录下创建gulpfile.js文件，此文件是项目主文件，类似于makefile，运行gulp命令时，默认从此文件运行

运行
gulp 或 gulp + 任务名称

运行结果
[17:36:26] Using gulpfile D:\project\gulpProject\gulpfile.js
[17:36:26] Starting 'default'...
[17:36:26] Finished 'default' after 3.51 ms

创建任务

series()按顺序运行其内的任务
parallel()异步运行

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

//此文件中定义一个函数就是于定义一个任务
//clean函数没有被exported，所以是私有任务，不能直接在外部运行，但仍然可以通过series()或parallel()调用组合,从而运行
function clean(cb) {
  // body omitted
  cb();
}

//build函数被exported,所以是公开的方法，可以通过 gulp build运行此任务,也可被series()和或parallel()调用 
function build(cb) {
  // body omitted
  cb();
}

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

任务任务组合嵌套

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

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

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

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

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

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

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

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

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

src()导入文件内容

语法 src(globs, [options])

globs 文件路径，string或array，可用*模糊匹配

option 可选参数 since,base,cwd,等,since可为指定时间以后的文件创建Vinyl 对象

return 得到文件的是stream内容,可以通过pipe管道链式操作

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

function copy() {
  return src('input/*.js')
    .pipe(dest('output/'));
}

exports.copy = copy;

dest() 将数据写文件

将文件stream写入指定文件，并仍返回stream

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/'));
}

function watch() {
  watch('src/images/**/*.jpg', images);
}

exports.watch = watch;

symlink() 创建文件超连接

const { src, symlink } = require('gulp');

function link() {
  return src('input/*.js')
    .pipe(symlink('output/'));
}

exports.link = link;

series() 顺序运行的任务

语法 series(…tasks)

参数 tasks 函数名或匿名函数

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

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

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

exports.build = series(javascript, css);

parallel() 异步运行的任务

语法 parallel(…tasks)

参数 tasks 函数名或匿名函数

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

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

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

exports.build = parallel(javascript, css);

watch() 监视文件系统变动

语法 watch(globs, [options], [task])

parameter	type	note
globs (required)	string array	要监视的文件系统
options	object	详见
task	function string	由series()或parallel组成的任务或匿名函数

示例

• 普通监视

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

watch(['input/*.js', '!input/something.js'], function(cb) {
  // body omitted
  cb();
});

• 更细化的监视

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

const watcher = watch(['input/*.js']);

watcher.on('change', function(path, stats) {
  console.log(`File ${path} was changed`);
});

watcher.on('add', function(path, stats) {
  console.log(`File ${path} was added`);
});

watcher.on('unlink', function(path, stats) {
  console.log(`File ${path} was removed`);
});

watcher.close();

• 组合事件处理

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

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

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

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

// You can use a single task
watch('src/*.css', css);
// Or a composed task
watch('src/*.js', series(clean, javascript));

watch()的events参数

默认情况下，当文件发生created,changed,deleted等操作watcher都会执行对应的任务。
如果需要使用不同的事件,可以使用events选项。events的可用事件有：‘add’, ‘addDir’, ‘change’, ‘unlink’, ‘unlinkDir’, ‘ready’, ‘error’,‘all’。“all”表示除了“ready”和“error”之外的所有事件。

//监视全部事件
const { watch } = require('gulp');

// All events will be watched
watch('src/*.js', { events: 'all' }, function(cb) {
  // body omitted
cb();
});

初始化执行

调用watch()时，任务不会执行，而是等待第一个文件更改。要在第一个文件更改之前执行任务，请将ignoreInitial选项设置为false

const { watch } = require('gulp');
// The task will be executed upon startup
watch('src/*.js', { ignoreInitial: false }, function(cb) {
	// body omitted
	cb();
});

队列执行

每个watch()保证其当前运行的任务不会再次并发执行。当监视程序任务正在运行时进行文件更改时，另一个执行程序将排队等待任务完成后运行。一次只能排队运行一次。
若要禁用排队，请将队列选项设置为false。

const { watch } = require('gulp');
// The task will be run (concurrently) for every change made
watch('src/*.js', { queue: false }, function(cb) {
  // body omitted
  cb();
});

延迟执行

在文件更改时，监视程序任务要等到延迟了200ms才会运行。这是为了避免在许多文件同时被更改时过早地启动任务——比如查找和替换。
若要调整延迟时间，请将延迟选项设置为正整数。

const { watch } = require('gulp');
// The task won't be run until 500ms have elapsed since the first change
watch('src/*.js', { delay: 500 }, function(cb) {
  // body omitted
  cb();
});

可选依赖

Gulp有一个可选的依赖项fsevents，它是一个特定于mac的文件监视程序。
如果您看到fsevents的安装警告—“npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents”,这不是问题。如果跳过fsevents安装，将使用回退监视程序，gulpfile中发生的任何错误都与此警告无关。

task() 不推荐的创建任务方式

提醒:这个API不再是推荐的模式——请使用export的方式创建任务。

在任务系统中定义任务。然后可以从命令行和series()、parallel()和lastRun() api访问该任务。

const { task } = require('gulp');

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

task(build);

const { task } = require('gulp');

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