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


Posted in Javascript onSeptember 25, 2017

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

<!-- 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>
<!-- header.php -->
<header>这是头部</header>
<!-- 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,并在里面写入如下代码:

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 要特别注意引入的方式,代码如下:

<!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 文件,增加一段监听代码,如下:

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 引入公用代码的问题,顺利解决,最后附上相关资料。

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

Javascript 相关文章推荐
jQuery 动态酷效果实现总结
Dec 27 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
jQuery动态产生select option下拉列表
Mar 15 Javascript
jquery实现楼层滚动效果
Jan 01 jQuery
vue同步父子组件和异步父子组件的生命周期顺序问题
Oct 07 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
layui-tree实现Ajax异步请求后动态添加节点的方法
Sep 23 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 Javascript
React学习之事件绑定的几种方法对比
Sep 24 #Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 #Javascript
通过源码分析Vue的双向数据绑定详解
Sep 24 #Javascript
JS实现手写parseInt的方法示例
Sep 24 #Javascript
Js利用console计算代码运行时间的方法示例
Sep 24 #Javascript
详解Web使用webpack构建前端项目
Sep 23 #Javascript
vue webuploader 文件上传组件开发
Sep 23 #Javascript
You might like
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php操作MongoDB类实例
2015/06/17 PHP
php 多个变量指向同一个引用($b = &amp;$a)用法分析
2019/11/13 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
学习javascript文件加载优化
2016/02/19 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
node的process以及child_process模块学习笔记
2018/03/06 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
python简单实现基数排序算法
2015/05/16 Python
Python Paramiko模块的安装与使用详解
2016/11/18 Python
Django学习笔记之Class-Based-View
2017/02/15 Python
Python正则抓取网易新闻的方法示例
2017/04/21 Python
彻底搞懂Python字符编码
2018/01/23 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
外贸主管求职简历的自我评价
2013/10/23 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
物业公司的岗位任命书
2014/06/06 职场文书
工地食品安全责任书
2015/05/09 职场文书
导游词之南迦巴瓦峰
2019/11/19 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS