Gulp

Gulp 是一个基于 Node.js 的流（stream）的自动化构建工具，其核心优势在于简洁的 API 和强大的流处理能力。Gulp 的源码解析涉及到对其内部机制、API 设计以及如何利用 Node.js 流的深入理解。它利用 Node.js 流来快速构建项目。它的核心在于自动化繁琐或复杂的任务，如 CSS 编译、图片压缩、文件合并等。Gulp 配置通常在名为 gulpfile.js 的文件中进行，

npm

npm i -D gulp gulp-plumber gulp-rollup gulp-uglify through2 @rollup/plugin-replace

yarn
yarn add -D gulp gulp-plumber gulp-rollup gulp-uglify through2 @rollup/plugin-replace

pnpm
pnpm add -D gulp gulp-plumber gulp-rollup gulp-uglify through2 @rollup/plugin-replace

package.json
{
  "scripts": {
    "test": "gulp"
  }
}

基本结构

gulpfile.js
const { task, src, series, dest } = require('gulp')
const rollup = require('gulp-rollup')
const through2 = require('through2')
const replace = require('@rollup/plugin-replace')
const plumber = require('gulp-plumber')
const uglify = require('gulp-uglify')

const cleanEntry = './dist/**/*.js'
const cleanLibrary = []

/**
 * @description: 获取 dist目录里面所有的 JS
 */
function genertCleanLibrary() {
    return src(cleanEntry)
        .pipe(
            through2.obj(function (file, encode, cb) {
                this.push(file.path)
                cb()
            })
        )
        .on('data', function (data) {
            cleanLibrary.push(data)
        })
}

/**
 * @description: 生成打包
 */
function Building() {
    console.log(cleanLibrary)
    return src(cleanEntry)
        .pipe(
            rollup({
                input: cleanLibrary,
                output: {
                    format: 'cjs'
                },
                onwarn: function (warning) {
                    if (warning.code === 'THIS_IS_UNDEFINED') {
                        return
                    }
                    console.error(
                        warning.message,
                        'gulpfile 中的 rollup 报错了 🍺🍺🍺'
                    )
                },
                plugins: [
                    replace({
                        preventAssignment: true,
                        'process.env.NODE_ENV': JSON.stringify('production')
                    })
                ]
            })
        )
        .pipe(plumber())
        .pipe(
            uglify({
                mangle: true, //类型：Boolean 默认：true 是否修改变量名
                compress: true //类型：Boolean 默认：true 是否完全压缩
            })
        )
        .pipe(dest('./dist'))
}

const buildHandle = series(genertCleanLibrary, Building)

task('default', buildHandle)

定义任务

使用 gulp.task 定义任务，每个任务通常对应一系列的 Gulp 插件调用和操作。
任务名：任务的唯一标识符。
任务函数：定义任务要执行的操作。

Gulp API

gulp.src ：指定要处理的文件的路径。
gulp.dest ：指定处理后的文件输出路径。
gulp.watch：监听文件变化，并在变化时执行指定任务。
gulp.series 和 gulp.parallel：用于组合任务。series 按顺序执行，parallel 并行执行。

Gulp

优点

易于使用：Gulp 的 API 简单直观，使得设置和配置任务变得容易。
高效性能：通过使用 Node.js 的流， Gulp 能够快速地执行任务，并且在处理文件时不需要写入磁盘。
丰富的插件生态：Gulp 社区提供了大量的插件，几乎可以完成任何自动化任务。
代码而非配置：Gulp 使用代码编写任务，这为复杂的任务提供了更高的灵活性和控制能力。
实时重载：与浏览器同步功能，使得开发体验更流畅。
串联任务：可以轻松地使用管道（pipe）将任务串联起来，形成复杂的工作流。

缺点

错误处理：在流中处理错误可能比传统的任务运行器更复杂，尤其是在串联多个操作时。
学习曲线：对于不熟悉 Node.js 和 流 的开发者来说，Gulp 可能有一定的学习曲线。
插件质量不一：虽然插件众多，但它们的质量和维护状态各不相同。
与Webpack 的比较：对于模块打包和处理依赖关系，Gulp 不如 Webpack 强大。
新项目采用率下降：随着 Webpack 等更专注于模块打包的工具的流行，Gulp 在新项目中的采用率有所下降。

总结

Gulp 以其简单、高效的工作方式在自动化构建领域占有一席之地。它非常适合处理一系列复杂的前端开发任务，尤其是当这些任务涉及到大量的文件处理时。然而，在模块打包和依赖管理方面，它可能不如一些专门的工具（如Webpack）强大。

基本结构​

定义任务​

Gulp API​

优点​

缺点​

总结​

基本结构

定义任务

Gulp API

优点

缺点

总结