这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

gulp 打包

新增pnpm-workspace.yaml工作区

packages:
  - "packages/**"
  - docs
  - play
  - internal/*

gulp 将开发流程中让人痛苦或耗时的任务自动化,从而减少你所浪费的时间、创造更大价值。 入门指南 简单 代码优于配置、node 最佳实践、精简的 API 集,gulp 让工作前所未有的简单。

internal 内部打包

指令安装

新建 gulp 打包指令

{
  "name": "@e-plus/build",
  "version": "0.0.1",
  "private": true,
  "main": "./dist/index.cjs",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "scripts": {
    "start": "gulp -f gulpfile.ts",
    "dev": "pnpm run stub",
    "stub": "unbuild --stub"
  },
  "peerDependencies": {
    "vue": "^3.2.25"
  },
  "dependencies": {
    "@pnpm/find-workspace-packages": "^4.0.16",
    "@pnpm/logger": "^4.0.0",
    "@rollup/plugin-commonjs": "^22.0.1",
    "@rollup/plugin-node-resolve": "^13.3.0",
    "@vitejs/plugin-vue": "^2.3.3",
    "@vitejs/plugin-vue-jsx": "^1.3.10",
    "@types/gulp": "^4.0.9",
    "chalk": "^5.0.1",
    "components-helper": "^2.0.0",
    "consola": "^2.15.3",
    "esbuild": "^0.14.47",
    "fast-glob": "^3.2.11",
    "fs-extra": "^10.1.0",
    "gulp": "^4.0.2",
    "lodash": "^4.17.21",
    "rollup": "^2.75.7",
    "rollup-plugin-esbuild": "^4.9.1",
    "ts-morph": "^14.0.0",
    "unplugin-vue-define-options": "^0.6.1"
  },
  "devDependencies": {
    "@esbuild-kit/cjs-loader": "^2.2.1",
    "@pnpm/types": "^8.4.0",
    "unbuild": "^0.7.4",
    "vue": "^3.2.37"
  }
}

目录结构

- internal 内部
 └── build 打包文件
    ├── gulpfile.ts
    └── package.json
    └── src 细节性打包
        └── utils

gulp 作为一个管道，可以多线程处理任务

utils

封装工具

path 工具

import path from "path";

// 项目根目录
export const projectRoot = path.resolve(__dirname, "../../");

// 打包输出目录
export const outDir = path.resolve(__dirname, "../../dist");

// e-plus 入口 index.ts
export const wpRoot = path.resolve(__dirname, "../../packages/e-plus");

// 组件目录
export const compRoot = path.resolve(projectRoot, "packages/components");

预设 2 个工具

import { spawn } from "child_process";
import { projectRoot } from "./paths";

// 自定义每个task的name
export const withTaskName = <T>(name: string, fn: T) =>
  Object.assign(fn, { displayName: name });

// 在node中开启一个子进程来运行脚本
export const run = async (command: string) => {
  return new Promise((resolve) => {
    // 将命令分割 例如：rm -rf 分割为['rm', '-rf'],进行解构[cmd,...args]
    const [cmd, ...args] = command.split(" ");
    const app = spawn(cmd, args, {
      cwd: projectRoot,
      stdio: "inherit",
      shell: true, // 默认情况下 linux才支持 rm -rf  windows安装git bash
    });
    // 在进程已结束并且子进程的标准输入输出流已关闭之后，则触发 'close' 事件
    app.on("close", resolve); //
  });
};

主任务

gulp 打包流程

1. 打包样式

2. 打包工具方法

3. 打包所有组件

4. 打包每个组件

5. 生成一个组件库

6. 发布组件

// 打包方式：串行(series)  并行(parallel)
import { series } from "gulp";
import { withTaskName, run } from "./src/utils";

// 可以先尝试一下删除根目录中的 dist
export default series(
  withTaskName("clean", async () => run("rm -rf ./dist")) // 删除dist目录
);