介绍
@lodder/grunt-postcss 是一个 Grunt 插件，用于通过 PostCSS 处理 CSS 文件。
PostCSS 是一个基于插件的 CSS 处理器，可以通过加载一系列插件来实现各种功能，例如自动添加浏览器前缀、变量替换、样式压缩等等。
@lodder/grunt-postcss 将 PostCSS 整合到了 Grunt 的构建流程中，使得可以在 Grunt 中方便地使用 PostCSS 处理 CSS 文件。
安装
@lodder/grunt-postcss 可以通过 npm 安装：
--- ------- ---------- ---------------------
同时还需要安装 PostCSS 和需要使用的 PostCSS 插件：
--- ------- ---------- ------- -------------------
使用
在 Gruntfile.js 中配置任务：
-------------- - --------------- -
------------------
-------- -
-------- -
---- -----
----------- -
---------------------------------
------------------------
------------------
-
--
----- -
---- ------------
----- -------
-
-
---
--------------------------------------------
----------------------------- -------------
--其中，options 中定义了需要使用的 PostCSS 插件及其配置，processors 数组中的每一项就是一个插件。
src 定义要处理的 CSS 文件，dest 定义处理后的文件目录。
执行任务：
----- -------
示例
假设需要处理的 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