Gulp自动化构建教程-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_33325899/article/details/96482759

安装

$ npm install --global gulp-cli
$ npm install --save-dev gulp

具体新建项目步骤:https://gulpjs.com/docs/en/getting-started/quick-start

配置文件

文件名称 gulpfile.js (或者Gulpfile.js)

如果需要不同模块化打包?

对于TypeScript，重命名gulpfile.ts并安装ts节点模块。
对于Babel，重命名gulpfile.babel.js并安装@ babel / register模块。

大多数新版本的节点都支持TypeScript或Babel提供的大多数功能，但import/ exportsyntax 除外。如果只需要该语法，请重命名gulpfile.esm.js并安装esm模块。

提示: 每个任务都可以拆分成自己的文件，然后导入到gulpfile中进行合成。允许您将gulpfile.js文件替换为名为gulpfile.js包含index.js被视为a 的文件的目录gulpfile.js

创建任务

公共任务从gulpfile导出，允许它们由 gulp 命令运行。
私人任务在内部使用，通常用作部分 series() 或 parallel() 组合。

series():要按顺序执行任务，请使用该series()方法。

parallel() :对于以最大并发性运行的任务，请将它们与parallel()方法结合使用。

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

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

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

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

/**
*1.先执行clean
*2.并发执行css,js任务
**/
exports.build = series(clean, parallel(css, javascript));

异步

gulp中task都是的异步任务

error-first callbacks (callback回调函数)

如果您的任务没有返回任何内容，则必须使用错误优先回调来表示完成, cb的参数只有一个Error

function callbackTask(cb) {
  // `cb()` should be called by some async work
  cb(new Error('kamoo'));
}

exports.default = callbackTask;

Returning a stream(stream流)

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

function streamTask() {
  return src('*.js')
    .pipe(dest('output'));
}

exports.default = streamTask;

Returning a promise (promise 异步)

function promiseTask() {
  return Promise.resolve('the value is ignored');
}

exports.default = promiseTask;

Returning a child process (子进程)

const { exec } = require('child_process');

function childProcessTask() {
  return exec('date');
}

exports.default = childProcessTask;

Returning an observable (rxjs 结合使用)

const { Observable } = require('rxjs');

function observableTask() {
  return Observable.of(1, 2, 3);
}

exports.default = observableTask;

Using async/await

const fs = require('fs');

async function asyncAwaitTask() {
  const { version } = fs.readFileSync('package.json');
  console.log(version);
  await Promise.resolve('some result');
}

exports.default = asyncAwaitTask;

文件操作

src() : 读取匹配规则的文件转换成 stream

dest() : 输出的目录

三种模式

文件匹配符号

无论操作系统如何\\。在glob中，\\保留为转义字符

默认模式，并将文件内容加载到内存中。插件通常以默认模式运行，许多插件不支持流模式。
Stream模式主要用于操作无法容纳在内存中的大文件，如图片或电影。Stream模式主要用于操作无法容纳在内存中的大文件，如巨型图像或电影。
空模式不包含任何内容，仅在处理文件元数据时很有用.

'glob_with_uncommon_\\*_character.js'

避免使用Node.js的path.join、__dirname、__filename、process.cwd()处理

*(单星号) : 匹配0~n个字符

匹配文件index.js，但不匹配scripts/index.js或像scripts/nested/index.js

'*.js'

**(多星号) : 匹配0~n个字符,支持跨段

会匹配文件scripts/index.js，scripts/nested/index.js和scripts/nested/twice/index.js

'scripts/**/*.js'

!(取反) :不匹配规则

匹配文件scripts/**/*.js，但不匹配scripts/vendor/**/*.js

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

删除重复匹配的规则

使用插件

gulp-rename : 修改文件名
gulp-uglify :压缩代码
gulp-if : 插件的使用中加入判断条件
through2:再修改第三方插件请客下,使用自定义插件(inline plugin)

实时转换

watch()

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

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

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

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

exports.default = function() {
  // You can use a single task
  watch('src/*.css', css);
  // Or a composed task
  watch('src/*.js', series(clean, javascript));
};

配置参数