gulp-file-include 是 gulp 插件，它提供了一个 include 方法让我们可以像后端模板那样把公共部分的页面导入进来。
安装依赖包（包括了 gulp-file-include 和 del）
npm install --save-dev gulp-file-include del
项目结构目录
修改 gulpfile.js，结合 browser-sync 一起使用
'use strict';
var gulp = require('gulp'),
del = require('del'),
fileinclude = require('gulp-file-include'),
browserSync = require('browser-sync').create();
// 清除 dist 文件夹
gulp.task('clean', function () {
return del.sync('./app/dist');
});
// html 整合
gulp.task('html', function () {
return gulp.src('./app/src/template/*.html')
.pipe(fileinclude())
.pipe(gulp.dest('./app/dist'));
});
// 配置服务器
gulp.task('serve', function () {
browserSync.init({
server: {
baseDir: './app/dist'
},
port: 8000
});
// 监听 html
gulp.watch('./app/src/template/**/*.html', ['html']).on('change', browserSync.reload);
});
gulp.task('default', ['clean', 'html', 'serve']);
html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
@@include('inc/header.html', {"title": "home"})
<p></p>
</body>
</html>
header.html:
<h1>@@title</h1>
打包：
gulp
浏览器会自动打开页面 http://localhost:8000，显示 home。在 dist 文件夹中查看 index.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>home</h1>
<p></p>
</body>
</html>
当然，gulp-file-include 还有很多强大的功能，具体内容可以参考官网，这里我就不多说了。