在前端开发中，我们经常需要在网页的头部和尾部插入一些固定的信息，比如公司名称、版权声明等内容。手动在每一个页面上添加这些信息不仅费时费力，而且容易出错。我们可以使用 gulp-headerfooter 这个 npm 包来自动化完成这个任务。
安装 gulp-headerfooter
在使用 gulp-headerfooter 之前，我们需要先安装它，可以通过下面的命令进行安装：
npm install gulp-headerfooter --save-dev
使用 gulp-headerfooter
下面我们来看一下如何使用 gulp-headerfooter。
首先，我们需要引入 gulp 和 gulp-headerfooter：
const gulp = require('gulp');
const headerfooter = require('gulp-headerfooter');接着，我们在 gulp 任务中使用 gulp-headerfooter：
gulp.task('addHeaderFooter', function () {
return gulp.src('src/*.html')
.pipe(headerfooter.header('<header>这是头部</header>'))
.pipe(headerfooter.footer('<footer>这是尾部</footer>'))
.pipe(gulp.dest('dist'));
});上面的代码中，我们首先使用 gulp.src() 方法选中需要处理的文件，然后使用 header() 和 footer() 方法分别为每个文件添加头部和尾部。最后，我们使用 gulp.dest() 方法将处理后的文件输出到 dist 文件夹中。
示例代码
下面是一个完整的 gulpfile.js 文件，供参考：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------ - -----------------------------
---------------------------- -------- -- -
------ ----------------------
---------------------------------------------------
---------------------------------------------------
-------------------------
---
-------------------- --------------------------------在命令行中运行 default 任务即可执行添加头部和尾部的操作。
深度学习
以上是使用 gulp-headerfooter 的基本操作，下面介绍一些高级用法。
使用文件作为头部和尾部
我们可以将头部和尾部放在单独的文件中，然后使用 file() 方法读取文件内容并添加到每个页面中。示例代码如下：
gulp.task('addHeaderFooterWithFile', function () {
return gulp.src('src/*.html')
.pipe(headerfooter.headerFile('header.html'))
.pipe(headerfooter.footerFile('footer.html'))
.pipe(gulp.dest('dist'));
});其中，header.html 和 footer.html 分别是头部和尾部的文件名。
在指定位置添加头部和尾部
我们可以使用 marker() 方法指定在什么位置添加头部和尾部。例如，在每个页面中添加头部和尾部时，我们只想在<body>标签后面添加，可以这样写：
-- -------------------- ---- -------
-------------------------------------- -------- -- -
------ ----------------------
----------------------------------------
-----------------
-
----------------------------------------
------------------
-
-------------------------
---此处的<body>和</body>分别是头部和尾部应该插入的位置。header() 和 footer() 方法都接收一个字符串参数，该参数可以是文件名或者是要添加的文本内容。
指导意义
使用 gulp-headerfooter 可以帮助我们自动化完成前端开发过程中重复的任务，能够节约时间提高效率。同时，学习 gulp-headerfooter 也有助于深入理解 gulp 的工作原理，对于提升自己的前端开发能力也有积极的推动作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69530