gulp-file-include构建公用头部尾部

喝着绿茶的猫

于 2018-04-11 15:54:22 发布

阅读量3.2k

点赞数

分类专栏：前端开发工具

本文链接：https://blog.youkuaiyun.com/luyu13141314/article/details/79897964

版权

前端开发工具专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何利用gulp-file-include自动化插入HTML文件的头部和尾部，节省手动修改的时间。通过创建header.html和footer.html作为公用部分，修改一处即可全局更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果静态文件都包含了公用的头部和尾部

一个个改的话太浪费时间啦。

gulp-file-include可以让我们把公用的文件都放在header.html和footer.html

然后再构建，如果需要改头部尾部的话只需要改一个文件就好。

这里写图片描述

page文件夹里面包含include文件夹和若干html静态文件：

这里写图片描述

include文件夹里放着公用的头部和尾部：（如果需要改尾部信息只需要改这个地方）

这里写图片描述

gulp-file-include文档 :查看

gulpfile.js:

var gulp = require('gulp');
var fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function() {
    // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
    gulp.src(['page/**/*.html', '!page/include/**.html'])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('dist'));
});