静态页面实现 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 相关文章推荐
List the Stored Procedures in a SQL Server database
Jun 20 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
JQuery记住用户名密码实现下次自动登录功能
Apr 27 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
vue调用高德地图实例代码
Apr 28 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
Aug 08 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
PHP静态成员变量
2017/02/14 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
jquery下onpropertychange事件的绑定方法
2010/08/01 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
通过action传过来的值在option获取进行验证的方法
2013/11/14 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
详解Angular之constructor和ngOnInit差异及适用场景
2017/06/22 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
如何在微信小程序里面退出小程序的方法
2019/04/28 Javascript
Python修改Excel数据的实例代码
2013/11/01 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
keras 读取多标签图像数据方式
2020/06/12 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
中专生毕业自我鉴定
2013/11/01 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
大学生考试作弊检讨书1000字
2014/10/14 职场文书
现实表现材料范文
2014/12/23 职场文书
护士心得体会范文
2016/01/25 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python