静态页面如何实现 include 引入公用代码
一直以来,我司的前端都是用 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 静态页面的头部和底部都是相同的,如何让每个页面统一调用一个公共的头部和底部呢?
静态页面Demo项目,如何将header和footer 像PHP一样 include?
静态页面如何实现 include 引入公用代码的更多相关文章
- PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程
1.server会依据文件的后缀名去进行解析,假设是HTML文件则server不会进行语法解析.而是直接输出到浏览器. 2.假设一个页面中所有都是HTML代码而没有须要解析的PHP语法,则没有必要保存 ...
- PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程
1.服务器会根据文件的后缀名去进行解析,如果是HTML文件则服务器不会进行语法解析,而是直接输出到浏览器. 2.如果一个页面中全部都是HTML代码而没有需要解析的PHP语法,则没有必要保存为PHP文件 ...
- jquery实现静态页面include
最近在写一套前端页面,发现每个页面都复制一遍公共头.尾,十分不方便.于是就想能否也像PHP模板引擎一样,使用include引入公共文件,这便是接下来这段代码的意义.我们先来总结一下需求: 1.可以像使 ...
- js引入php 用来加载静态页面 输出到页面中
HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd&q ...
- velocity生成静态页面代码
首先需要必备的jar包: web.xml <!-- load velocity property --> <servlet> <servlet-name>veloc ...
- 浅谈php生成静态页面
一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...
- 比较详细PHP生成静态页面教程
一,PHP脚本与动态页面. PHP脚本是一种服务器端脚本程序,可通过嵌入等方法与HTML文件混合, 也可以类,函数封装等形式,以模板的方式对用户请求进行处理.无论以何种方式,它的基本原理是这样的.由客 ...
- Asp.net MVC 视图之公用代码
一.公共模板 转自:http://www.cnblogs.com/kissdodog/archive/2013/01/07/2848881.html 1.@RenderBody() 在网站公用部分通过 ...
- 使用 gulp-file-include 构建前端静态页面
前言 虽然现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地.最近也看到了一些询问如何 include HTML 文件的问题. 很多时候我们在写静态页面的时候也希望能 ...
随机推荐
- 如何将Windows7系统中“运行”历史记录全部清除
如何将Windows7系统中“运行”历史记录全部清除.. 如何将Windows7系统中“运行”历史记录全部清除 1.任务栏空白处按下鼠标右键,在右键菜单栏中选择“属性”, 2.切换到“开始菜单”选项卡 ...
- RSA,Miller-Rabin素数测试的源流及其证明
一.RSA与公钥加密系统的起源与影响. 为了更好地突出公钥加密系统相对私钥加密系统的优势,让我们从这两个问题开始: 这个世界上如果没有公钥加密系统会怎么样呢?全用私钥加密系统会出现什么问题呢? 首先, ...
- 实现一个简单的Laravel的dd库
前几天写了一个简单的Laravel的dd库. 为什么自己要写一个这样的库? Laravel本身已经实现了自己的输出dd函数,但是我之所以要写这样一个库,一来是因为Laravel本身对这个库的封装没办法 ...
- [转]RMI方式Ehcache集群的源码分析
RMI方式Ehcache集群的源码分析 Ehcache不仅支持基本的内存缓存,还支持多种方式将本地内存中的缓存同步到其他使用Ehcache的服务器中,形成集群.如下图所示: Ehcache支持 ...
- C++学习日记(一)————类与对象
C++远征之封装篇(上)笔记 所有内容都是听课笔记,愿课堂视频如下: C++远征之封装篇(上)-慕课网http://www.imooc.com/learn/382 类和对象 1 什么是类,什么是对象 ...
- VB与C#语言部分不用的地方Part1
1. 数据类型: ① 日期型(Date) 表示日期和时间用两个“#”符号把日期和时间的值括起来,如:#08/20/2001#.#2001-08-20#. ② 变体型(Variant) ...
- RMA退货流程解决方案
RMA退货流程解决方案 1.概述 在高科技制造业中有效地对产品退货进行控制和跟踪有很大的意义.对于一个产品成本从几元到几十万元的工业,管理退货流程的能力至关重要,缺乏跟踪和控制有可能导致上百万元的损失 ...
- 九度OJ 1016 火星A+B AC版
#include <iostream> #include <string.h> #include <sstream> #include <math.h> ...
- SNS团队第七次站立会议(2017.04.28)
一.当天站立式会议照片 本次会议主要内容:汇报工作进度,根据完成情况调整进度 二.每个人的工作 成员 今天已完成的工作 明天计划完成的工作 罗于婕 导入相关词库数据 研究如何存取语音.图片文件 龚晓 ...
- 201521123082 《Java程序设计》第14周学习总结
201521123082 <Java程序设计>第14周学习总结 标签(空格分隔):java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. Answ ...