一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的，就像下面这样：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!-- index.php -->
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
meta
name="viewport" content="width=device-width, initial-scale=1.0">
<
meta
http-equiv="X-UA-Compatible" content="ie=edge">
<
title
>Document</
title
>
</
head
>
<
body
>
<?
php
include('header.php'); ?>
<
div
>页面主体部分</
div
>
<?
php
include('footer.php'); ?>
</
body
>
</
html
>
|
|
1
2
|
<!-- header.php -->
<
header
>这是头部</
header
>
|
|
1
2
|
<!-- footer.php -->
<
footer
>这是底部</
footer
>
|
直到最近某个项目需要做一个 webapp，是通过 HBuilder 将静态页面打包成 APP，这就让我碰到难题了。
如果是小项目，那就直接手动多复制粘贴几遍，但如果页面较多，复制粘贴的方案明显不靠谱，维护成本也高。
在查了很多资料后，最终确定用 gulp 来解决，具体操作如下：
1、安装 gulp 和 gulp-file-include
首先新建个文件夹，在终端里定位到文件夹的位置，然后进行 npm 初始化
npm init
然后安装 gulp
npm install gulp --save-dev
接着安装 gulp-file-include
npm install gulp-file-include --save-dev
2、新建并配置 gulpfile.js
接着我们手动新建一个 js 文件取名为 gulpfile，并在里面写入如下代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
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'
));
});
|
3、创建项目目录结构，并添加测试代码
项目的整体目录结构应该是这样
app
page
include
header.html
footer.html
index.html
gulpfile.js
package.json
然后我们添加测试代码，header.html 和 footer.html 没太多好说的，主要是 index.html 要特别注意引入的方式，代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!
DOCTYPE
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8">
<
meta
name="viewport" content="width=device-width, initial-scale=1.0">
<
meta
http-equiv="X-UA-Compatible" content="ie=edge">
<
title
>Document</
title
>
</
head
>
<
body
>
@@include('include/header.html')
<
div
>页面主体部分</
div
>
@@include('include/footer.html')
</
body
>
</
html
>
|
4、运行
在终端里敲入以下代码，看执行效果
gulp fileinclude
会发现，多了个 dist 文件夹，里面有一个 index.html 文件，gulp-file-include 已经帮我们把最终编译好的 index.html 文件生成好了。
可能你已经能举一反三了，在 gulpfile.js 里，我们可以手动设置最终生成文件的位置，就是这句话
gulp.dest('dist')
5、自动编译
静态页面引入公用代码的问题已经解决了，但每次编写源 html 后，都要去终端里手动执行下编译操作还是很麻烦，那能不能让文件自动编译呢？答案一定是可以的。
gulp 有个 watch 方法，就是监听文件是否有变动的，我们只需稍微修改下 gulpfile.js 文件，增加一段监听代码，如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
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'
));
});
gulp.task(
'watch'
,
function
() {
gulp.watch(
'page/**/*.html'
, [
'fileinclude'
]);
});
|
写好之后，我们只需在终端里执行
gulp watch
我们每次保存源 html 后，gulp 就会自动帮我们编译一遍。
至此，静态页面如何实现 include 引入公用代码的问题，顺利解决，最后附上相关资料。
附：
HTML 静态页面的头部和底部都是相同的，如何让每个页面统一调用一个公共的头部和底部呢？
