element-ui组件库(六)-theme-chalk的打包

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

     gulp 是一个管道，它是一个总览全局的任务管理器，那么在每一步上，其实就是针对每一个 packages的文件打包。今天主要讲的就是关于 css 的打包，之前有提到过，css 的分包可以达到按需加载的目的。element-ui 的设计是通过 glup 分包管理。

     最近比较火的 naive-ui呢选择了另外的一种打包方式css in js，这样的话，就可以不去解决 sass 的打包问题。

目录结构

├── gulpfile.ts // gulp 打包
├── package.json // package 打包控制
└── src // 所有的 css
    ├── icon.scss 
    ├── index.scss
    └── mixins // scss 的方法
        ├── config.scss
        ├── function.scss
        └── mixins.scss

package.json

@type/*这里是针对于 typescript 的类型声明，其他的gulpfile 中详细描述。

 "scripts": {
    "build": "gulp --require @esbuild-kit/cjs-loader"
  },
  "devDependencies": {
    "@esbuild-kit/cjs-loader": "^2.2.1",
    "@types/gulp-autoprefixer": "^0.0.33",
    "@types/gulp-clean-css": "^4.3.0",
    "@types/gulp-rename": "^2.0.1",
    "@types/gulp-sass": "^5.0.0",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.1.0"
  },

pnpm 中分包管理，可以通过以下方式，打包文件-后续不会使用，仅仅做theme-chalk打包测试，应该后续会用 gulp 去执行。

"build-css": "pnpm run -C packages/theme-chalk build"

ts 问题

在打包的过程中，ts 会报错，element-ui 为什么不报错呢？

@esbuild-kit/cjs-loader

关键点就在它 - Node.js require()钩子可以根据需要使用esbuild将ESM & TypeScript即时转换为CommonJS。

gulpfile配置

import path from "path";
// 终端字符串样式
import chalk from "chalk";
// gulp是类似一个管道的方式执行，从入口开始到出口，中间一步步执行
// series就是用来依次执行任务的
// 一般利用.pipe方法将插件放置在src()和dest()之间，处理stream流。在输入和输出之间来处理文件
import { series, src, dest } from "gulp";
// sass
import gulpSass from "gulp-sass";
import dartSass from "sass";
// 添加样式前缀
import autoprefixer from "gulp-autoprefixer";
// 压缩css
import cleanCSS from "gulp-clean-css";
// console的升级版本,是一个功能更丰富，更漂亮的控制台日志输出控件。
import consola from "consola";

const distFolder = path.resolve(__dirname, "dist");

/**
 * 对sass文件做处理
 */
function buildThemeChalk() {
  const sass = gulpSass(dartSass);
  // 从src下的scss文件开始
  // =>编译成css=>添加前缀=>压缩
  // =>最终输出到当前目录下dist下的css目录
  return src(path.resolve(__dirname, "./src/*.scss"))
    .pipe(sass.sync())
    .pipe(autoprefixer({ cascade: false }))
    .pipe(
      cleanCSS({}, (details) => {
        // 可以清晰的看到，每个文件的压缩大小
        consola.success(
          `${chalk.cyan(details.name)}: ${chalk.yellow(
            details.stats.originalSize / 1000
          )} KB -> ${chalk.green(details.stats.minifiedSize / 1000)} KB`
        );
      })
    )
    .pipe(dest(distFolder));
}

/**
 * 把打包好的css输出到根目录的dist
 */
function copyfullstyle() {
  const rootDistPath = path.resolve(__dirname, "../../dist/theme-chalk");
  return src(path.resolve(__dirname, "./dist/**")).pipe(dest(rootDistPath));
}

export default series(buildThemeChalk, copyfullstyle);