前言
在 Web 开发工作中，样式表是不可或缺的一部分。由于样式表不仅包含基本的属性设置，还包含定制的复杂样式，因此样式表文件可能会很大，使得 Web 应用程序的加载时间变慢。为了优化这一问题，前端工程师就需要借助 gulp、webpack、grunt 等构建工具打包压缩样式表文件。其中，gobble-concat-css 是一个很有用的 npm 包，可以将多个样式表文件合并成单个文件，以减少文件数量和加载时间。在本文中，我们将了解如何使用 gobble-concat-css 进行样式表的合并和优化。
安装 gobble-concat-css
首先，我们需要确保已经安装了最新版本的 Node.js 和 npm。然后，我们可以使用以下命令来安装 gobble-concat-css：
npm install gobble-concat-css --save-dev
使用 gobble-concat-css
创建一个 gobble 项目
要使用 gobble-concat-css，我们需要先创建一个基本的 gobble 项目。如果你不熟悉 gobble 的概念和用法，请参考 gobble 的官方文档。
假设我们有以下样式表文件：
/styles/base.css /styles/layout.css /styles/skins.css
在 gobblefile.js 文件中添加任务
接下来，我们需要在 gobblefile.js 文件中添加任务，以便使用 gobble-concat-css 将这些文件合并为一个文件。我们可以使用 gobble-concat-css 将这三个文件合并为一个名为 main.css 的文件：
-- -------------------- ---- -------
--- ------ - ------------------
--- --------- - -----------------------------
--- --- - ----------------
--------------------- -
---- --------
----- ----------
---
-------------- - ----这里我们使用 gobble 的 transform 方法来调用 gobble-concat-css 的地方，在 transform 方法中，我们指定了要合并的文件所在的目录（'styles'）以及要匹配的文件扩展名（'*.css'）。然后，我们使用 dest 属性来指定目标文件的名称.
运行 gobble
最后，我们可以运行 gobble 命令来开启开发服务：
gobble serve
gobble 会自动启动本地服务器，你可以通过浏览器访问 http://localhost:4567 查看合并后的样式表。
自定义合并后的样式表
如果我们需要自定义合并后的样式表的名称，可以修改代码如下：
var css = gobble('styles')
.transform(concatCss, {
src: '*.css',
dest: 'merged-styles.css'
});总结
在本文中，我们学习了如何使用 gobble-concat-css 工具将多个样式表文件合并为一个文件，以提高 Web 应用程序的加载性能。使用 gobble-concat-css 工具可减少 HTTP 请求次数，留出更多资源处理其他任务，如 JavaScript 脚本的下载和解析。如果在合并过程中遇到问题，请参考官方文档或向社区求助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e6e255dee6beeee7405