静态页面实现 include 引入公用代码的示例

一直以来，我司的前端都是用 php 的 include 函数来实现引入 header 、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，并在里面写入如下代码：

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', '!page/include*.html', ['fileinclude']);
});

写好之后，我们只需在终端里执行

gulp watch

我们每次保存源 html 后，gulp 就会自动帮我们编译一遍。

至此，静态页面如何实现 include 引入公用代码的问题，顺利解决，最后附上相关资料。

以上这篇静态页面实现 include 引入公用代码的示例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。