一直以来,我司的前端都是用 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 引入公用代码的问题,顺利解决,最后附上相关资料。

附:

HTML 静态页面的头部和底部都是相同的,如何让每个页面统一调用一个公共的头部和底部呢?

静态html如何包括header和footer ?

静态页面Demo项目,如何将header和footer 像PHP一样 include?

grunt-html-imports

静态页面如何实现 include 引入公用代码的更多相关文章

  1. PHP代码为什么不能直接保存HTML文件——&gt;PHP生成静态页面教程

    1.server会依据文件的后缀名去进行解析,假设是HTML文件则server不会进行语法解析.而是直接输出到浏览器. 2.假设一个页面中所有都是HTML代码而没有须要解析的PHP语法,则没有必要保存 ...

  2. PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程

    1.服务器会根据文件的后缀名去进行解析,如果是HTML文件则服务器不会进行语法解析,而是直接输出到浏览器. 2.如果一个页面中全部都是HTML代码而没有需要解析的PHP语法,则没有必要保存为PHP文件 ...

  3. jquery实现静态页面include

    最近在写一套前端页面,发现每个页面都复制一遍公共头.尾,十分不方便.于是就想能否也像PHP模板引擎一样,使用include引入公共文件,这便是接下来这段代码的意义.我们先来总结一下需求: 1.可以像使 ...

  4. js引入php 用来加载静态页面 输出到页面中

    HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd&q ...

  5. velocity生成静态页面代码

    首先需要必备的jar包: web.xml <!-- load velocity property --> <servlet> <servlet-name>veloc ...

  6. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  7. 比较详细PHP生成静态页面教程

    一,PHP脚本与动态页面. PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合, 也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客 ...

  8. Asp.net MVC 视图之公用代码

    一.公共模板 转自:http://www.cnblogs.com/kissdodog/archive/2013/01/07/2848881.html 1.@RenderBody() 在网站公用部分通过 ...

  9. 使用 gulp-file-include 构建前端静态页面

    前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能 ...

随机推荐

  1. <当幸福来敲门>之一些很喜欢的台词收藏

    <当幸福来敲门> ================ ================

  2. 7.21.01 if语句

    if语句 一个if语句包含一个布尔表达式和一条或多条语句. 语法 if语句的用语法如下: if(布尔表达式) { //如果布尔表达式为true将执行的语句 } 如果布尔表达式的值为true,则执行if ...

  3. Visual Studio 编译使用FLTK库

    FLTK介绍 FLTK (Fast Light Tool Kit 发音为fulltick) 是一种使用C++开发的GUI工具包,它可以应用于Unix,Linux,MS-Windows95/98/NT/ ...

  4. Eclipse关闭项目

    Eclipse 关闭项目 为什么要关闭项目? Eclipse 工作空间包含了多个项目.一个项目可以是关闭或开启状态. 项目打开过多影响有: 消耗内存 占用编译时间:在删除项目.class 文件(Cle ...

  5. oracle导库

    cmd窗口直接输入导库命令即可,不需要进入sqlplus C:\Documents and Settings\Administrator> imp username/pass@orcl file ...

  6. POI设置excel某列值为文本格式

    excel单元格格式默认为[常规],当某列限定必须从下拉框选择一个纯数字文本的时候,必须将单元格格式设置为[文本]. 否则即使输入的值和下拉框的一致,excel都认为输入的值是常规类型,而下拉框的值为 ...

  7. 微信网页授权封装接口——node.js版

    Wechat 网页授权 授权url:(请在微信客户端中打开此链接体验) xxx为config.js中的WECHAT_DOMAIN 1.scope为snsapi_base xxx/?route=auth ...

  8. 基于FPGA的Sobel边缘检测的实现

    前面我们实现了使用PC端上位机串口发送图像数据到VGA显示,通过MATLAB处理的图像数据直接是灰度图像,后面我们在此基础上修改,从而实现,基于FPGA的动态图片的Sobel边缘检测.中值滤波.Can ...

  9. Spring五个事务隔离级别和七个事务传播行为

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt216 Spring五个事务隔离级别和七个事务传播行为 1. 脏读 :脏读就是 ...

  10. 《Java从入门到放弃》JavaSE入门篇:异常

    异常!!!看看生活中的异常例子: 正常情况下,从家到公司上班,只需要20分钟!但如果在路上碰到堵车或修路或车突然自燃等问题,那就没办法正常去上班了.其中堵车或修路或车突然自燃等问题就属于异常. 碰到异 ...