静态页面如何实现 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 静态页面的头部和底部都是相同的,如何让每个页面统一调用一个公共的头部和底部呢?

静态html如何包括header和footer ?

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

grunt-html-imports

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369069.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java list 循环赋值_Java List集合的坑(add方法报空指针,循环赋值时list已保存的值会改变)...

先看空指针异常&#xff1a;ListmovieInfos null;这样创建时&#xff0c;list指向为空&#xff0c;修改方法&#xff1a;ListmovieInfos new ArrayList();再看list循环赋值的问题&#xff1a;问题描述&#xff1a;for (i0;i<10;i){movieInfoSum.movieId (int)recommendatio…

ros使用时的注意事项技巧

1.rosrun package-name executable-name 比如 rosrun turtlesim turtlesim_node 2.一旦启动roscore后,便可以运行ROS程序了。ROS程序的运行实例被称为节点(node)&#xff0c;roscore叫做节点管理器 3.查看节点列表rosnode list 4.需要注意节点名并不一定与对应可执行文件名称相…

分享几道经典的javascript面试题

这几道题目还是有一点意思的&#xff0c;大家可以研究一番&#xff0c;对自己的技能提升绝对有帮助。 1、调用过程中输出的内容是什么 function fun(n, o) {console.log(o);return {fun : function(m) {return fun(m, n);}} }var a fun(0);a.fun(1);a.fun(2);a.fun(3);var…

Rete之外的生活– RIP Rete 2013 :)

我只是对我的新算法进行最后的修改。 它合并了Leaps &#xff0c; 面向集合的Match和Left / Right取消链接的概念 &#xff0c;以及我自己的一些想法。 该代码已提交&#xff0c;但我正在积累工作并编写更多测试。 我将在一周左右的时间内写一个完整的博客&#xff0c;详细介绍…

Ubuntu+vscode打不开

前沿: vscode链接参考链接 问题: 之前在Ubuntu上安装chrome, 结果chrome没装成功, 还把vscode给qiu坏了, 貌似是当时安装chrome时提示要升级一个包. 后来发现当时是修改了libnss这个包的版本: 解决方法: # 将libnss给downgrade一下就OK了. sudo apt install libnss32:3.21-1ubu…

java线程死锁代码_java线程死锁代码示例

死锁是操作系统层面的一个错误&#xff0c;是进程死锁的简称&#xff0c;最早在 1965 年由 Dijkstra 在研究银行家算法时提出的&#xff0c;它是计算机操作系统乃至整个并发程序设计领域最难处理的问题之一。事实上&#xff0c;计算机世界有很多事情需要多线程方式去解决&#…

【2018】判定三角形

Time Limit: 3 second Memory Limit: 2 MB 输入三个正整数&#xff0c;若能用这三个数作为边长组成三角形&#xff0c;则判断三角形的形状&#xff0c;如果是等边三角形就输出“DB”&#xff0c;如果是等腰三角形就输出“DY”&#xff0c;否则就输出“YB”&#xff1b;如果不能…

纯css隐藏移动端滚动条解决方案(ios上流畅滑动)

html代码展示&#xff08;直接复制代码保存至本地文件运行即可&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, init…

Spring Data Solr教程:配置

在我的Spring Data Solr教程的上一部分中&#xff0c;我们了解到Solr提供了一个类似REST的HTTP API&#xff0c;该API可用于向Solr索引添加信息并针对索引数据执行查询。 问题在于&#xff0c;在开发环境中运行单独的Solr实例有点麻烦。 但是&#xff0c;并非所有希望都因此而…

JavaAppArguments.java

思路&#xff1a;定义一个String类型的变量&#xff0c;用来接收每次args读取到的值&#xff0c;然后把String转换为int,然后计算输出sum。 流程图&#xff1a; 源代码&#xff1a; 截图&#xff1a; 转载于:https://www.cnblogs.com/xiaohaigege666/p/7635907.html

webpack 引入jquery和第三方jquery插件

1、引入jquery jQuery 直接在 html 中引入&#xff0c;然后在 webpack 中把它配置为全局即可。 index.html: <!DOCTYPE html><html><head><meta charset"UTF-8"><title><% htmlWebpackPlugin.options.title %></title>&…

Spring Data Solr教程:CRUD(差不多)

在我的Spring Data Solr教程的上一部分中&#xff0c;我们学习了如何配置Spring Data Solr。 现在该迈出一步&#xff0c;了解我们如何管理Solr实例中存储的信息。 此博客文章描述了我们如何向Solr索引添加新文档&#xff0c;如何更新现有文档的信息以及如何从索引中删除文档。…

数独项目--关键代码展示:

关键代码展示&#xff1a; //判断该数字在当前数独是否符合要求 int judge(int num, int ple){ int x ple / 9; //x表示数字的纵坐标 int y ple % 9; //y表示数字的横坐标 int qulx x / 3; int quey y / 3; //que表示9宫格的区域 for (int i 0; i < 9; i){ if (…

java svn 版本号_eclipse中的Java文件自动根据svn版本号生成注释

经常在java代码中看到以下的注释($Rev: $Date),是不是很酷,怎么生成的呢&#xff1f;/*** A FilterChain is an object provided by the servlet container to the developer* giving a view into the invocation chain of a filtered request for a resource. Filters* use th…

〖Mysql〗-- python操作数据库

【数据库进阶】 python 操作MYSQL数据库主要有两种方式&#xff1a;    使用原生模块&#xff1a;pymysql  ORM框架&#xff1a;SQLAchemy 一、pymysql 1.1下载安装模块 12第一种&#xff1a;cmd下&#xff1a;执行命令下载安装&#xff1a;pip3 install pymysql第二种&…

Sublime Text3—Code Snippets(自定义代码片段)

摘要 程序员总是会不断的重复写一些简单的代码片段&#xff0c;为了提高编码效率&#xff0c;我们可以把经常用到的代码保存起来再调用。 平时用sublime安装各种插件&#xff0c;使用Tab键快速补全&#xff0c;便是snippets&#xff08;可译为代码片段&#xff09;的一种。 …

JBoss AS7 JNDI和EJB 3.1命名更改

由于“功能培训”继续前进&#xff0c;而我们又没有使软件堆栈保持最新&#xff0c;因此我们的团队发现自己处于迁移的不可行位置&#xff1a; JBoss 4.2.3到AS 7.1.x&#xff08;当前为7.1.1&#xff09; EJB 2.1到EJB 3.1 休眠2到休眠3或4 以快速的方式。 我的意思是&…

static关键字(修饰函数、局部变量、全局变量)

在C语言中&#xff0c;static的字面意思很容易把我们导入歧途&#xff0c;其实它的作用有三条。 &#xff08;1&#xff09;先来介绍它的第一条也是最重要的一条&#xff1a;隐藏。 当我们同时编译多个文件时&#xff0c;所有未加static前缀的全局变量和函数都具有全局可见性。…

POJ 2236 - Wireless Network ( 并查集 )

题意 一个计算机网络里的计算机都坏了, 现在有两种操作, “O p”代表修复了p机器, “S p q”代表检查 p, q 两台机器是否连接( 直线距离<d或者中间有距离<d的用来联通的机器 ) 思路 比赛的时候愣是没读清楚题目意思, 还以为是什么搜索, 瞎瘠薄做了个MLE 没料到居然是个并…

Apriori 关联分析算法原理分析与代码实现

转自穆晨 阅读目录 前言关联分析领域的一些概念Apriori算法基本原理频繁项集检索实现思路与实现代码关联规则学习实现思路与实现代码小结回到顶部前言 想必大家都听过数据挖掘领域那个经典的故事 - "啤酒与尿布" 的故事。 那么&#xff0c;具体是怎么从海量销售信息中…