什么是 metalsmith-rework
metalsmith-rework 是一个基于 metalsmith 的插件，用于将 CSS 文件进行处理和优化，使其更加高效和易于维护。metalsmith-rework 依赖于 rework 和 rework-npm 插件实现。
安装 metalsmith-rework
在使用 metalsmith-rework 之前，需要先安装 metalsmith 和 metalsmith-cli，以及 rework 和 rework-npm：
npm install -g metalsmith npm install -g metalsmith-cli npm install rework --save-dev npm install rework-npm --save-dev
然后，安装 metalsmith-rework：
npm install metalsmith-rework --save-dev
在 metalsmith 中使用 metalsmith-rework
使用 metalsmith-rework 的第一步是将其添加到 metalsmith 的插件列表中。在 metalsmith 的配置文件中，创建一个插件对象，然后将插件对象添加到插件列表中。
以下是一个示例的 metalsmith 配置文件：
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ------ - ----------------------------- --------------------- -------------- -------------------- ------------ ------------- ----- ---------- ------ ----------- ---- - --------------- ----------- - --- --------------- ----- - -- ----- ----- ---- ---展开代码
使用 metalsmith-rework 的最基本方式是通过提供一个 files 属性来指定需要处理的 CSS 文件。比如上面的例子中，files 属性指定了需要处理的所有 CSS 文件。
有时候，你希望只处理特定的 CSS 文件，可以使用 glob 模式来筛选文件。比如下面的例子只处理 src 目录下的 main.css 文件：
.use(rework({ root: __dirname, files: 'src/main.css', use: [ 'autoprefixer', 'clean-css' ] }))
配置 metalsmith-rework
metalsmith-rework 提供了几个选项，可以帮助我们更好地控制对 CSS 文件的处理。
root
root 属性指定了处理 CSS 文件时的根目录。它的默认值为 process.cwd()，即当前的工作目录。
files
files 属性指定需要处理的 CSS 文件。它可以是字符串或数组类型，使用 glob 模式匹配文件。默认值为 **/*.css。
use
use 属性指定了对 CSS 文件的处理方式，可以是一个或多个插件（rework 插件或 rework-npm 模块）的名称或实例。使用插件时需要先将其安装并引入项目中。默认值为空数组。
sourcemap
sourcemap 属性指定是否生成 source map 文件。它的值可以是布尔值或一个对象，source map 选项的详细用法可参考 rework 的文档。默认值为 false。
compress
compress 属性指定是否压缩 CSS 文件。它的值可以是布尔值或一个对象，clean-css 插件选项的详细用法可参考 clean-css 的文档。默认值为 true。
options
options 属性指定了传递给 rework 处理 CSS 文件的选项。默认值为空对象。
metalsmith-rework 在 metalsmith 中的使用示例
以下是一个完整的 metalsmith 配置文件的示例，包含了 metalmsith-rework 对 CSS 文件的处理过程。
-- -------------------- ---- ------- ----- ---------- - ---------------------- ----- ------ - ----------------------------- --------------------- -------------- -------------------- ------------ ------------- ----- ---------- ------ ----------- ---- - ------------- --------------- ------- - ----- ------ -- -- ---------- ----- --------- - ------------------ ----- -- -------- - ------- --------- ----------- - --- --------------- ----- - -- ----- ----- ---- ---展开代码
在这个示例中，metalsmith-rework 对 CSS 文件的处理包括以下几个步骤：
使用 rework-npm 插件，将 CSS 中的 @import url() 规则替换为 @import 插入模块的所有内容。
使用 autoprefixer 插件，自动添加 CSS 的浏览器前缀。
使用 url 插件，替换 CSS 中的相对路径为绝对路径，并在文件名中添加指纹，防止浏览器读取缓存文件。
使用 sourcemap 选项生成 source map 文件，以便调试 CSS。
使用 compress 选项压缩 CSS 文件，关闭 aggressiveMerging 选项以避免意外合并属性。
使用 options 选项传递给 rework 处理 CSS 文件的选项，指定了浏览器前缀列表。
结语
metalsmith-rework 是一个非常实用的 CSS 处理工具，广泛应用于前端开发工作中。通过本文的介绍和示例，你应该已经掌握了 metalsmith-rework 的基本使用方法和配置方式。在实际开发中，希望你可以灵活运用 metalsmith-rework，提高 CSS 的开发效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f411d8e776d08040d44
