gulp4 使用指南

以下介绍一些 gulp 的 基本语法和 常用插件。

1，介绍

gulp4 使用新语法来定义默认 task 和其他 task。

1. 通过函数来定义 task。
2. 只有导出（ export）的 task 才能使用 gulp taskName 执行。如果没有 export，则只能通过 series 和 parallel组合成新的 task 再 export 才能被调用。
3. 通过默认导出（export default）来定义默认task。默认 task 当执行 gulpfile.js 文件时会默认调用。

举例说明：

1，commonJS 风格

gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less'); // 编译 less
var cleanCSS = require('gulp-clean-css'); // 压缩 css
var rename = require('gulp-rename');
var { deleteAsync} = require('del');

function clean() {
  return deleteAsync([ 'assets' ]);
}

function task1() {
  return gulp.src('src/styles/**/*.less')
    .pipe(less())
    .pipe(cleanCSS())
    // pass in options to the stream
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest('assets/styles/'));
}

function task2() {}

function watchFiles() {
  gulp.watch('src/styles/**/*.less', task1);
}

// series 串行执行 task
// parallel 并行执行 task
var build = gulp.series(clean, gulp.parallel(task1, task2));

exports.task1= task1
exports.task2= task2
exports.watch = watch;
exports.default = build 

2，ESModule 风格

gulpfile.mjs

import gulp from "gulp";
import less from "gulp-less"; // 编译 less
import rename from "gulp-rename"; // 压缩 css
import cleanCSS from "gulp-clean-css";
import { deleteAsync } from "del";

const clean = () => deleteAsync(["assets"]);

export function task1() {
  return gulp.src('src/styles/**/*.less')
    .pipe(less())
    .pipe(cleanCSS())
    .pipe(rename({
      basename: 'main',
      suffix: '.min'
    }))
    .pipe(gulp.dest('assets/styles/'));
}

export function task2() {}

function watchFiles() {
  gulp.watch('src/styles/**/*.less', task1);
}
// 可以更换导出名称
export { watchFiles as watch };

// series 串行执行 task
// parallel 并行执行 task
const build = gulp.series(clean, gulp.parallel(task1, task2));

export default build;

2，基本语法

1，执行 task

全局安装 gulp 后，运行 gulp 命令会自动执行当前目录下的 gulpfile 文件中的默认 task。

注意，如果使用的 ESModule， gulpfile 文件应该是 gulpfile.mjs

// 自动执行当前目录下的 `gulpfile` 文件中的默认 task
gulp

// 执行当前目录下的 `gulpfile` 文件中 taskName
gulp taskName

// -f 指定配置文件
gulp -f myGulpfile.mjs

2，src dest pipe

src、dest 和 pipe 是 Gulp 提供的API，用于在构建过程中操作文件，处理文件流和文件的输入输出。

1. src(globs)：

src() 方法用于指定要处理的文件源。
参数： 它接受一个或多个匹配模式（Globs）作为参数，用于指定要处理的文件或文件夹的路径。
例如，src('src/*.less') 将匹配所有位于 src/ 文件夹下的 .less 文件。

返回值： 返回一个文件流（File Stream），代表选定的文件集合。可以通过链式调用其他 Gulp 方法来对文件流进行处理。

2. dest(folder)：

dest() 方法用于将接收到的文件流中的文件，写入指定的目录中。
参数： 它接受一个字符串参数，表示要输出的目录路径。

3. pipe(transform)：
pipe() 方法用于将文件流传递给其他 Gulp 任务或转换操作。
参数： 它接受一个函数 或 Gulp 插件作为参数。

示例

import gulp from "gulp";

export function styles() {
  return gulp.src('src/*.less')
    .pipe(/* 执行其他任务，例如压缩、合并等 */)
    .pipe(gulp.dest('dist/'));
}

3，常用插件

1，gulp-less | gulp-sass

都是编译器。用于编译 .less 和 .scss 文件。

1，gulp-less 不需要指定底层编译器，可直接使用。

示例

import gulp from "gulp";
import less from 'gulp-less'

export function styles() {
  return gulp.src('src/*.less')
    .pipe(less())
    .pipe(gulp.dest('dist/'));
}

2，gulp-sass 需要指定底层编译器，现在已经不推荐用 Node Sass（Node Sass is deprecated），推荐使用 Dart Sass。

相比于旧版本的 Node Sass，Dart Sass 具有更好的性能和更全面的特性支持。

示例

import gulp from "gulp";
import gulpSass from 'gulp-sass'
import dartSass from "sass";

export function styles() {
  const sass = gulpSass(dartSass);
  return gulp.src('src/*.scss')
    .pipe(sass.sync())
    .pipe(gulp.dest('dist/'));
}

2，gulp-autoprefixer

用于自动添加浏览器前缀（Vendor Prefixes）到 CSS 文件中，以确保样式在不同的浏览器中具有一致的兼容性。

示例

import gulp from "gulp";
import gulpSass from "gulp-sass";
import dartSass from "sass";
import autoprefixer from "gulp-autoprefixer";

export default function styles() {
  const sass = gulpSass(dartSass);
  return gulp
    .src("src/*.scss")
    .pipe(sass.sync())
    .pipe(autoprefixer())
    .pipe(gulp.dest("dist/"));
}

其中 cascade 属性默认为 true，其作用是：
相同选择器的多个样式规则，会按照特定的规则进行叠加和覆盖。

这个属性，我实际测试 true | false 的结果貌似一样，求教大家有没有什么例子能说明下这个属性。

3，gulp-clean-css

用于压缩和优化 CSS 文件的大小，以减少网络传输时间和提高网页加载性能。

这个方法有2个属性，第1个是配置项，第2个是文件详情，包括压缩前后大小对比，路径名称等。

示例

import gulp from "gulp";
import gulpSass from 'gulp-sass'
import dartSass from "sass";
import cleanCSS from 'gulp-clean-css'

export function styles() {
  const sass = gulpSass(dartSass);
  return gulp.src('src/*.scss')
    .pipe(sass.sync())
    .pipe(autoprefixer({ cascade: false }))
    .pipe(
        cleanCSS({}, (details) => {
          console.log(details)
            /* 
	          details = {
	            stats: {
	              efficiency: 0.536231884057971,
	              minifiedSize: 32, // 单位 Byte
	              originalSize: 69,
	              timeSpent: 6
	            },
	            errors: [],
	            warnings: [],
	            path: 'F:\\mycode\\src\\affix.css', // 输出路径中有转义符号。
	            name: '\\mytest.css'
	          }
	        */
        })
      )
    .pipe(gulp.dest('dist/'));
}

4，gulp-rename

用于重命名文件或文件夹。
在构建过程中，有时需要对生成的文件进行重命名，或者将文件移动到不同的目录中。gulp-rename 插件提供了一种简单的方式来重命名文件，通过修改文件的路径和名称来实现。

示例

import gulp from "gulp";
import gulpSass from 'gulp-sass'
import dartSass from "sass";
import cleanCSS from 'gulp-clean-css'

export function styles() {
  const sass = gulpSass(dartSass);
  const noPrefixFile = /(index|base)/ // 不需要加前缀的 scss 文件。
  return gulp.src('src/*.scss')
    .pipe(sass.sync())
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cleanCSS())
    .pipe(
        rename((path) => {
          /* 
            path = {
              dirname: '.',
              basename: 'button',
              extname: '.css'
            }
          */
          if (!noPrefixFile .test(path.basename)) {
            path.basename = `myPrefix-${path.basename}`
          }
        })
      )
    .pipe(gulp.dest('dist/'));
}

以上。

4，cli 和 package.json 配置脚本相关

可以运行 gulp -help 查看相关参数。

1. gulp -f，手动指定配置文件。
2. gulp --require，在运行配置文件前，加载的一个依赖，可以做一些预处理。

1，直接运行 gulp 命令

默认查找根目录下的 gulpfile.js 配置文件的默认导出任务。

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

function task1() {
  return src("src/styles/*.less").pipe(dest("output/"));
}

function copy() {
  return src("src/styles/*.less").pipe(dest("output/"));
}

exports.task1= task1;
exports.default = copy;

注意，

• gulpfile.js要使用 CommonJS 规范，还有默认导出，否则会报错。
• 可以手动指定要运行的 task gulp task1

2，使用 ES6 的语法

有2种实现方式

1，使用gulpfile.mjs ，并在运行 gulp 时手动指定配置文件

gulp -f gulpfile.mjs

2，还是使用gulpfile.js，但需要搭配编译工具来编译下配置文件。

如果是 gulpfile.ts 文件，依旧适用该方法。

// 编译 js 文件。
npm install @esbuild-kit/cjs-loader

//  默认查找根目录下 gulpfile.js，gulpfile.mjs，gulpfile.ts 文件，gulpfile.js 优先级最高。
gulp --require @esbuild-kit/cjs-loader

// 手动指定配置文件
gulp --require @esbuild-kit/cjs-loader -f xxx.js

3，Typescript

如果是 gulpfile.ts 文件，依旧可以使用 @esbuild-kit/cjs-loader 先进行编译。

// 默认查找根目录下存在 gulpfile.ts
gulp --require @esbuild-kit/cjs-loader