什么是 gulp-include
gulp-include 是一个 Gulp 的插件，它可以让开发者在 Gulp 任务中使用类似于其他编程语言中的 include 或 import 的语法，方便地将代码片段插入到其他文件中。比如，我们可以将一些常用的 HTML 片段打包成一个单独的 HTML 文件，在需要的时候直接引用它即可，可以减少重复的代码，提高代码复用率。
安装
首先，我们需要安装 Node.js 和 Gulp，如果你已经完成了他们的安装，那么可以通过 npm 安装 gulp-include 插件：
npm install gulp-include --save-dev
使用
使用 gulp-include 非常简单，下面是一个例子。我们假设我们有这样一个目录结构：
- src |- index.html |- header.html |- footer.html
其中，header.html 和 footer.html 是 HTML 片段文件，包含了常用的网站头和页脚内容。而 index.html 则是我们的网站首页，我们要在它的头和尾分别引用 header.html 和 footer.html。
首先，在 gulpfile.js 中引入 gulp-include 插件和其他依赖：
const gulp = require('gulp');
const include = require('gulp-include');然后，我们可以创建一个名为 html 的 Gulp 任务，用于编译 HTML 文件：
gulp.task('html', function() {
return gulp.src('src/index.html')
.pipe(include())
.pipe(gulp.dest('dist/'));
});注意，gulp-include 的作用就是将 HTML 文件中的 @@include('header.html') 和 @@include('footer.html') 转换成实际的 HTML 片段。这两个语句表示分别引用了 header.html 和 footer.html。
在 index.html 中，我们要加上这两个语句：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------- ------- ------ ------------------------ ----------- -- -- ------------- ------------------------ ------- -------
最后，我们就可以执行 gulp html 命令，生成编译后的 HTML 文件。这些文件会被输出到 dist 目录下。通过浏览器打开 dist/index.html，可以看到已经成功引入了 header.html 和 footer.html 文件。
总结
gulp-include 是 Gulp 任务中非常有用的一个插件。通过使用它，我们可以轻松地将代码片段插入到其他文件中，从而减少代码量，提高代码复用率，让我们的开发效率更高。同时，它也可以作为学习 Gulp 的入门教程，帮助我们更深入地了解 Gulp 的基本使用方法。
示例代码
在上面的教程中，我们已经讲到了如何使用 gulp-include 插件，下面是完整的示例代码。切换到你的项目目录中，执行以下命令即可：
npm install gulp gulp-include --save-dev
gulpfile.js：
const gulp = require('gulp');
const include = require('gulp-include');
gulp.task('html', function() {
return gulp.src('src/index.html')
.pipe(include())
.pipe(gulp.dest('dist/'));
});src/index.html：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------- --------------- ------- ------ ------------------------ ----------- -- -- ------------- ------------------------ ------- -------
src/header.html：
-- -------------------- ---- -------
--------
-----
----
-------------
--------------
----------------
-----
------
---------src/footer.html：
<footer> <p>Copyright 2020</p> </footer>
执行 gulp html 命令，即可生成编译后的 HTML 文件，输出到 dist 目录中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedca52b5cbfe1ea06123d6