介绍
gulp-typed-markup 是一款可以帮助前端开发者快速生成标准 HTML 文件的 npm 包。它支持 pug, ejs, jsx, nunjucks 等多种模板语言，并在生成 HTML 文件的同时，可以执行各种前端构建任务，如压缩 CSS、JS，图片优化等等。这篇文章将为大家详细介绍 gulp-typed-markup 的使用方法，让大家能够更快速、方便地生成标准的 HTML 文件。
安装
在使用 gulp-typed-markup 之前，需要先安装 gulp 和 gulp-typed-markup。
// 安装 gulp 和 gulp-typed-markup npm install --save-dev gulp gulp-typed-markup
使用
1. 创建 Gulp 任务
首先，在 gulpfile.js 中创建一个任务，启动 gulp-typed-markup 插件。以下是一个简单的示例代码：
-- -------------------- ---- -------
-- -- ---- - ----------------- --
----- ---- - ----------------
----- ------ - -----------------------------
-- ------
-------------------- -- -- -
------ ------------------------------
--------------
------- ------
--------- ----
---
-------------------------
---上面的代码中，我们在 gulpfile.js 中定义了一个名为 default 的任务，它会将 ./src 目录下所有扩展名为 .pug 或 .ejs 的文件进行编译，然后将编译结果输出到 ./dist 目录下。
2. 配置 gulp-typed-markup
在调用 gulp-typed-markup 插件时，可以传入一些参数来配置生成 HTML 文件的行为。
下面是 gulp-typed-markup 插件支持的参数：
engine(optional)：指定要使用的模板引擎，默认为pug；format(optional)：指定 HTML 文件的风格，支持html,xhtml和xml；pretty(optional)：指定是否要美化生成的 HTML 代码；globals(optional)：指定传递给模板的全局变量；locals(optional)：指定传递给模板的局部变量；optimize(optional)：指定是否要优化生成的 HTML 代码；minify(optional)：指定是否要压缩生成的 HTML 代码；lint(optional)：指定是否要检查生成的 HTML 代码是否符合标准。
以下是一个配置示例：
-- -------------------- ---- -------
-------------------- -- -- -
------ ------------------------------
--------------
------- ------
------- -------
------- -----
-------- -
------ -------------------
--
------- -
------- ----- -----
--
--------- -----
------- -----
----- ----
---
-------------------------
---3. 模板语言语法
gulp-typed-markup 支持多种模板语言。以下是使用 pug 作为模板语言的一个示例：
doctype html
html
head
title= title
body
h1= title
p Hello #{name}!这个示例中，我们首先定义了 HTML5 的 doctype，然后通过缩进的方式表示 HTML 文档的结构，最后使用 #{} 语法来插入动态变量。
gulp-typed-markup 具体支持哪些模板语言，请参考官方文档。
结束语
本文介绍了 gulp-typed-markup 的安装和使用方法，希望能够帮助前端开发者更方便、快速地生成标准的 HTML 文件。如果大家有任何疑问或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671481e8991b448e3652