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

2023-09-24 05:18:07 62

一直以来，我司的前端都是用php的include函数来实现引入header、footer这些公用代码的，就像下面这样：









Document



页面主体部分


这是头部


这是底部

直到最近某个项目需要做一个webapp，是通过HBuilder将静态页面打包成APP，这就让我碰到难题了。

如果是小项目，那就直接手动多复制粘贴几遍，但如果页面较多，复制粘贴的方案明显不靠谱，维护成本也高。

在查了很多资料后，最终确定用gulp来解决，具体操作如下：

1、安装gulp和gulp-file-include

首先新建个文件夹，在终端里定位到文件夹的位置，然后进行npm初始化

npminit

然后安装gulp

npminstallgulp--save-dev

接着安装gulp-file-include

npminstallgulp-file-include--save-dev

2、新建并配置gulpfile.js

接着我们手动新建一个js文件取名为gulpfile，并在里面写入如下代码：

vargulp=require('gulp');
varfileinclude=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要特别注意引入的方式，代码如下：







Document


@@include('include/header.html')
页面主体部分
@@include('include/footer.html')

4、运行

在终端里敲入以下代码，看执行效果

gulpfileinclude

会发现，多了个dist文件夹，里面有一个index.html文件，gulp-file-include已经帮我们把最终编译好的index.html文件生成好了。

可能你已经能举一反三了，在gulpfile.js里，我们可以手动设置最终生成文件的位置，就是这句话

gulp.dest('dist')

5、自动编译

静态页面引入公用代码的问题已经解决了，但每次编写源html后，都要去终端里手动执行下编译操作还是很麻烦，那能不能让文件自动编译呢？答案一定是可以的。

gulp有个watch方法，就是监听文件是否有变动的，我们只需稍微修改下gulpfile.js文件，增加一段监听代码，如下：

vargulp=require('gulp');
varfileinclude=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']);
});

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

gulpwatch

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

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

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

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

热门推荐

随机推荐