静态页面实现 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+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 Javascript
JavaScript实现分页效果
Mar 28 Javascript
vue-router单页面路由
Jun 17 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
基于vue开发的在线付费课程应用过程
Jan 25 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 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
php生成缩略图的类代码
2008/10/02 PHP
php pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php中unlink()、mkdir()、rmdir()等方法的使用介绍
2012/12/21 PHP
深入HTTP响应状态码速查表的详解
2013/06/07 PHP
如何将JS的变量值传递给ASP变量
2012/12/10 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
JavaScript jquery及AJAX小结
2016/01/24 Javascript
js 获取元素所有兄弟节点的实现方法
2016/09/06 Javascript
从0开始学Vue
2016/10/27 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
JS实现求数组起始项到终止项之和的方法【基于数组扩展函数】
2017/06/13 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
2019/04/26 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python中selenium实现文件上传所有方法整理总结
2017/04/01 Python
基于python元祖与字典与集合的粗浅认识
2017/08/23 Python
简单实现python画圆功能
2018/01/25 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
python读取和保存图片5种方法对比
2018/09/12 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
新加坡鲜花速递/新加坡网上花店:Ferns N Petals
2020/08/29 全球购物
花卉与景观设计系大学生求职信
2013/10/01 职场文书
机电工程学生自荐信范文
2013/12/07 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
冬季安全检查方案
2014/05/23 职场文书
班主任经验交流材料
2014/12/16 职场文书
感谢信怎么写
2015/01/21 职场文书
2015年读书月活动总结
2015/03/26 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
升学宴来宾致辞
2015/07/27 职场文书