静态页面实现 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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
学习JavaScript设计模式(封装)
Nov 26 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
谈一谈vue请求数据放在created好还是mounted里好
Jul 27 Javascript
vue实现移动端H5数字键盘组件使用详解
Aug 25 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
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
php与java通过socket通信的实现代码
2013/10/21 PHP
php简单日历函数
2015/10/28 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
JQuery读取XML文件数据并显示的实现代码
2009/12/16 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
2010/10/17 Javascript
jquery插件制作简单示例说明
2012/02/03 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
JavaScript DOM节点添加示例
2014/07/16 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
详解vue-resource promise兼容性问题
2017/06/20 Javascript
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python实现在windows服务中新建进程的方法
2015/06/30 Python
python代理工具mitmproxy使用指南
2019/07/04 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
django haystack实现全文检索的示例代码
2020/06/24 Python
python三引号如何输入
2020/07/06 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
Java程序开发中如何应用线程
2016/03/03 面试题
后勤自我鉴定
2013/10/13 职场文书
个人四风问题原因分析及整改措施
2014/09/28 职场文书
董事长年会致辞
2015/07/29 职场文书
德能勤绩工作总结
2015/08/11 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技