简介
gulp-tag-include 是一个可以在 HTML 中使用自定义标签来引入其他文件的插件。具体而言，它支持以下两种自定义标签：
- <!-- include("path/to/file.html") -->
- <include src="path/to/file.html"></include>
使用 gulp-tag-include 可以让我们更轻松地组织代码结构，提高代码的复用性和可读性。下面将详细介绍如何使用这个插件。
安装
使用 npm 可以很方便地安装 gulp-tag-include：
npm install gulp-tag-include --save-dev
使用
首先，我们需要在 gulpfile.js 中引入 gulp-tag-include：
const gulp = require('gulp');
const include = require('gulp-tag-include');接着，我们可以定义一个任务来处理 HTML 文件，使用 gulp-tag-include 替换自定义标签：
gulp.task('html', function() {
return gulp.src('src/**/*.html')
.pipe(include())
.pipe(gulp.dest('dist'));
});这个任务会处理 src 目录下所有的 HTML 文件，并将替换后的文件输出到 dist 目录下。现在我们就可以开始在 HTML 文件中使用自定义标签了。
示例
比如我们有这样一个 HTML 文件 index.html：
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ---------- ------- ------ ---- ---------------------- --- --------- ----------- -------- ---------------------------- ------- -------
其中使用了两种自定义标签分别引入了 header.html 和 footer.html 文件。现在我们需要在项目中创建这两个文件。
header.html 文件：
-- -------------------- ---- -------
--------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---------footer.html 文件：
<footer> <p>© 2021 My Site</p> </footer>
现在我们可以运行 gulp html 命令，查看处理后的文件，应该会得到这样的结果：
-- -------------------- ---- -------
--------- -----
------
------
----------------------- ----------
-------
------
--------
-----
----
------ ----------------------
------ -----------------------
------ -------------------------
-----
------
---------
--------- -----------
--------
--------- ---- -- --------
---------
-------
-------可以看到，header.html 和 footer.html 文件被成功地引入到了 index.html 文件中，并且被替换成了实际的内容。
高级用法
gulp-tag-include 还支持一些高级用法，例如使用 if 标签只引入条件成立的文件，使用 for 标签多次引入同一个文件等等。这里就不一一赘述了，有兴趣的可以查看官方文档。
总结
使用 gulp-tag-include 可以让我们更方便地组织 HTML 文件，提高代码的复用性和可读性。希望这篇文章能帮助大家了解并使用这个插件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70369