介绍
@lodder/grunt-postcss 是一个 Grunt 插件，用于通过 PostCSS 处理 CSS 文件。
PostCSS 是一个基于插件的 CSS 处理器，可以通过加载一系列插件来实现各种功能，例如自动添加浏览器前缀、变量替换、样式压缩等等。
@lodder/grunt-postcss 将 PostCSS 整合到了 Grunt 的构建流程中，使得可以在 Grunt 中方便地使用 PostCSS 处理 CSS 文件。
安装
@lodder/grunt-postcss 可以通过 npm 安装：
npm install --save-dev @lodder/grunt-postcss
同时还需要安装 PostCSS 和需要使用的 PostCSS 插件：
npm install --save-dev postcss postcss-plugin-name
使用
在 Gruntfile.js 中配置任务：
-- -------------------- ---- ------- -------------- - --------------- - ------------------ -------- - -------- - ---- ----- ----------- - --------------------------------- ------------------------ ------------------ - -- ----- - ---- ------------ ----- ------- - - --- -------------------------------------------- ----------------------------- ------------- --展开代码
其中，options 中定义了需要使用的 PostCSS 插件及其配置，processors 数组中的每一项就是一个插件。
src 定义要处理的 CSS 文件，dest 定义处理后的文件目录。
执行任务：
grunt postcss示例
假设需要处理的 CSS 文件如下：
-- -------------------- ---- ------- -- ------------- -- ---- - ------ ----- ---------- ----- - ------ - ----------------- -------- ----------- ---------------- ---- -展开代码
使用 @lodder/grunt-postcss，可以使用以下插件对 CSS 进行处理：
- postcss-plugin-name：在每个选择器前添加一个类名。
- autoprefixer：自动添加浏览器前缀。
- cssnano：压缩 CSS 文件。
在 Gruntfile.js 中的配置如下：
-- -------------------- ---- ------- -------------- - --------------- - ------------------ -------- - -------- - ---- ----- ----------- - --------------------------------- ------------------------ ------------------ - -- ----- - ---- ------------ ----- ------- - - --- -------------------------------------------- ----------------------------- ------------- --展开代码
执行任务，会得到以下处理后的 CSS 文件：
-- -------------------- ---- ------- -- -------------- -- ---- ---- - ------ ----- ---------- ----- - ---- ------ - ----------------- -------- ----------- ---------------- ----- ------------------- ---------------- ----- - ---- ------ - ----------------- ----- -展开代码
总结
@lodder/grunt-postcss 可以方便地将 PostCSS 整合到 Grunt 构建流程中，为前端开发提供了强大的 CSS 处理能力。结合 PostCSS 的各种插件，可以实现各种复杂的 CSS 处理任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196876
