前言
前端技术不断发展，越来越多的工具和库被开发出来，加快了我们的开发效率。其中，npm 是一个非常受欢迎的包管理器，可以帮助我们管理和使用各种类库和工具。gobble-postcss 就是其中一个提高前端效率的 npm 包，它可以帮助我们自动化处理 css，减少手动编写 css 的时间和错误。
gobble-postcss 简介
gobble-postcss 是一个基于 postcss 的 gobble 插件，用于自动生成 css 或处理 css 任务。由于 postcss 是一个强大的 css 处理工具，gobble-postcss 也非常实用。
gobble-postcss 可以处理的任务包括：
- 将 Sass 或 Less 转成 css
- 压缩 css
- 自动添加 css 前缀
- css 静态资源内联
- ...
注：本文主要介绍 gobble-postcss 的使用方法，所以不会涉及太多 postcss 的内容，需要了解 postcss 的可以参考官方文档：postcss。
安装和使用
确保已经安装了 gobble，如果没有安装，可以使用以下命令安装：
npm install -g gobble-cli
使用以下命令安装 gobble-postcss：
npm install gobble-postcss --save-dev
创建
gobblefile.js文件，编写 gobble 任务。以下是一个简单的例子：-- -------------------- ---- ------- ----- ------ - ------------------ ----- ------- - -------------------------- ----- --- - ----------------- ------------------- - -------- - -------------------------- -------------------- - --- -------------- - ------------ ---------------上面的例子中，我们首先引入 gobble 和 gobble-postcss 模块，然后创建了一个转换 css 的 gobble 任务。任务配置了两个 postcss 的插件：
autoprefixer和cssnano，分别用于自动添加 css 前缀和压缩 css。最后，我们将 css 任务和静态资源任务合并在一起，并将其导出为 gobble。使用以下命令执行 gobble 任务：
gobble
运行以上命令后，在
dist目录下会生成处理后的 css 文件和静态资源。同时，gobble 会监听文件的变化并实时更新。
至此，gobble-postcss 的安装和使用就介绍完了。下面我们来看一个更加详细的例子。
完整示例
接下来，我们将使用 gobble-postcss 来处理一个完整的项目。该项目使用 Sass 处理 css，同时支持 css 的压缩和自动添加前缀功能。
创建项目文件夹并初始化 npm：
mkdir gobble-postcss-demo cd gobble-postcss-demo npm init
安装所需依赖：
npm install gobble-cli gobble-postcss gobble-sass autoprefixer cssnano --save-dev
- gobble-cli：gobble 的命令行工具；
- gobble-postcss：gobble 的 postcss 插件；
- gobble-sass：gobble 的 Sass 插件；
- autoprefixer：postcss 的自动添加前缀的插件；
- cssnano：postcss 的 css 压缩插件。
创建一些文件和目录：
mkdir src mkdir src/css mkdir src/assets touch src/index.html touch src/css/index.scss
在
src/css/index.scss中写入以下代码：-- -------------------- ---- ------- ---- - ---------- ----- ------ ----- - ---- - ------ ------ ------- ------ ----------------- ----- -
在
gobblefile.js中编写 gobble 任务：-- -------------------- ---- ------- ----- ------ - ------------------ ----- ---- - ----------------------- ----- ------- - -------------------------- ----- --- - ----------------- ---------------- ------------------- - -------- - -------------------------- -------------------- - --- -------------- - ------------ ---------------该任务首先使用 gobble-sass 将 Sass 编译成 css，然后使用 gobble-postcss 处理 css。我们只添加了
autoprefixer和cssnano两个插件。最后，我们通过 gobble 将 css 任务和静态资源任务合并成最终的任务。使用以下命令执行 gobble 任务：
gobble
运行以上命令后，在
dist目录下会生成处理后的 css 和静态资源。同时，gobble 会监听文件的变化并实时更新。在
src/index.html中引入处理后的 css：-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------------- ------------ ----- ---------------- ---------------------- ------- ------ ---- ------------------ ------- -------
运行以下命令启动本地服务器：
npx serve dist
在浏览器中打开 http://localhost:5000，你应该可以看到以下效果。
至此，本文介绍 gobble-postcss 的使用方法就结束了。gobble-postcss 可以帮助我们自动化处理 css，节省开发时间。在项目中使用 gobble-postcss 会使开发更加高效、简洁。更多 gobble-postcss 的使用方法请参考官方文档：gobble-postcss。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6f255dee6beeee7449