在前端开发中，我们常常需要使用 CSS 预处理器来提高开发效率和代码可维护性。而 gobble-stylus-html 这个 NPM 包则是基于 Gobble 构建的一个用于编译 Stylus 到 CSS 并且对 HTML 文件进行压缩、格式化等操作的工具。在本篇文章中，我们将介绍 gobble-stylus-html 的使用方法，并且给出一些示例代码。
什么是 Gobble
Gobble 是一个基于流的前端构建工具，可以让你轻松地将一个或多个 JavaScript 文件（包括 CSS、HTML、图片等）以更好的方式组合在一起。Gobble 采用了一种独特的模型，通过将变化量优先于文件本身，从而加速了构建流程。Gobble 可以优化处理 CSS、JS、图片等，而且不需要你手动去做：
- 构建流程基于插件，可以通过插件灵活定制；
- 利用 watcher 监测文件变化来自动更新构建结果。
关于 gobble-stylus-html
gobble-stylus-html 的功能主要包括：编译 Stylus、压缩 HTML、格式化 HTML 等。其主要 API 的使用方式如下：
-- -------------------- ---- ------- ----- ------ - ------------------ ----- ------ - ------------------------------ --- -------- - -------- --- --------- - ----------- --- ---- - ---------------- ---------------------------- ----------------------------- ---------------------------------- --------------------
- Options 是可选的 Stylus 和 HTMLminify 或 HTML beautifier 的配置对象。
gobble-stylus-html 的安装和使用
首先，我们需要先安装 gobble-stylus-html：
npm install gobble-stylus-html --save-dev
之后，在我们的 Gobblefile.js 文件中添加：
const gobble = require('gobble');
const stylus = require('gobble-stylus-html');
const input = gobble('src').transform(stylus());
module.exports = input;这样就完成了对 stylus 的编译了。随后，我们可以使用一些其他的 gobble 插件来压缩 HTML 文件或者对其进行格式化。
例如，我们安装 htmlmin 和 htmlbeautify：
npm install htmlminify html-beautify --save-dev
然后，在我们的 GobbeFile.js 文件中增加以下代码：
const gobble = require('gobble');
const stylus = require('gobble-stylus-html');
const htmlmin = require('htmlminify');
const htmlbeautify = require('html-beautify');
const input = gobble('src').transform(stylus()).transform(htmlmin()).transform(htmlbeautify());
module.exports = input;这样，我们就完成了对 HTML 文件的压缩和格式化。
Options 的使用
在使用 gobble-stylus-html 的时候，我们可以通过传递 options 参数来对其行为进行一些配置。以下为常用的 options 配置：
stylus(options)
const gobble = require('gobble');
const stylus = require('gobble-stylus-html');
const input = gobble('src').transform(stylus({
compress: true
}));
module.exports = input;htmlminify(options)
-- -------------------- ---- -------
----- ------ - ------------------
----- ------ - ------------------------------
----- ------- - ----------------------
----- ----- - -----------------------------------------------------
------------------- -----
--------------------- ----
----
-------------- - ------htmlbeautify(options)
const gobble = require('gobble');
const stylus = require('gobble-stylus-html');
const htmlbeautify = require('html-beautify');
const input = gobble('src').transform(stylus()).transform(htmlbeautify());
module.exports = input;实际应用示例
以下是一个简单的用 gobble-stylus-html 打造一个 Web 项目的示例：
-- -------------------- ---- -------
----- ------ - ------------------
----- ------ - ------------------------------
----- ------- - ----------------------
----- ------------ - -------------------------
--- -------- - --------
--- --------- - -----------
--- --- - -----------------
--- --- - ------------------------- -------------------------------------- --------
--- -- - ----------------------- ---------
--- --- - --------------------- --------- -------- ----------
--- ---- - -------------------------------------------------------------- --------
-- -----
--- ---- - ------------ --- ---- ------
--------------------------
-------------------
-------------- - -----这个示例代码中，我们用 gobble 实现了以下操作：
- 首先将 src 目录变为 gobble 文件流格式；
- 通过 include 筛选需要处理的文件类型；
- 对于 CSS 类型文件，通过 transform 调用 gobble-stylus-html 进行编译，并且开启了压缩 CSS 的选项；
- 对于 HTML 类型文件，通过 transform 调用 htmlminify 进行压缩，同时通过 transform 调用 htmlbeautify 进行格式化；
- 对于所有文件类型，通过 transform 调用 htmlbeautify 进行整理 HTML 格式，并移动构建结果到 outputDir 目录。
这一系列的操作实现了一个整体构建流程。可以根据自己的需求进行一些定制。
总结
本文介绍了 gobble-stylus-html 这个工具的使用方法，并且给出了示例代码。希望这篇文章能够帮助读者更好地理解 Gobble 和 gobble-stylus-html 的使用方法，同时也希望读者不断深入学习和实践，提升自己在前端领域的技术能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e70255dee6beeee746a