静态页面如何实现 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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏吴柯的运维笔记

Linux系统日志管理常用的工具和指令

前言 日志对于安全来说,非常重要,它记录了系统每天发生的各种各样的事情,你可以通过它来检查错误发生的原因,或者受到攻击时攻击者留下的痕迹。 日志主要的功能有:...

62911
来自专栏魏艾斯博客www.vpsss.net

用 phpstudy 搭建本地 php 环境及安装 wordpress 教程

7364
来自专栏小二的折腾日记

使用gitpage+Hexo搭建自己的博客

摘自:https://xuanwo.org/2015/03/26/hexo-intor/ 写的很详细了,就不仔细写一遍了,就当个记录吧,以后出问题了好解决一点。

942
来自专栏祝威廉

StreamingPro-Editor, 基于Intellij Idea 的编辑器插件发布

StreamingPro在内部已经用在比较复杂的项目上了。所以导致配置文件巨复杂,之前同事提到这事,然后我自己把配置代码拉下来,看了下确实如此。一开始想着能否利...

912
来自专栏Google Dart

开始使用-初尝胜果 顶

本页介绍如何“测试驱动器”Flutter:从我们的模板创建一个新的Flutter应用程序,运行它,并学习如何使用Hot Reload进行更改。

863
来自专栏FreeBuf

快讯 | macOS的快速浏览缓存可能会泄露加密数据

macOS的快速浏览机制允许用户在不需要实际打开文件的情况下查看文件的内容,但研究人员Wojciech Reguła表示,这个功能很可能泄露缓存文件的信息,即使...

1070
来自专栏青玉伏案

iOS逆向工程之Theos

如果你对iOS逆向工程有所了解,那么你对Tweak并不陌生。那么由Tweak我们又会引出Theos, 那么什么是Theos呢,简单一句话,Theos是一个越狱开...

3109
来自专栏后端之路

idea svn 使用方法(Merge)

目前项目中使用idea作为主要的开发工具。 部分同学在操作idea的vcs总是会出现一些问题,现将使用步骤说明如下: idea虽然自带svn插件,但是仍然是调用...

2877
来自专栏Java面试笔试题

在VMware上安装CentOS版本的Linux虚拟机

2.点击“编辑虚拟机设置”,选择“CD/DVD”,点击"使用ISO映像文件"在本地找到合适的镜像文件;

1232
来自专栏听雨堂

Python在VSCode中进入交互界面调试

VSCode非常强大,断点好用,美中不足,每次只能通过下面窄窄一行进行各种检查,而python的优点就在于交互式的调试,所以希望能够在断点时能够进入到正常的交互...

3518

扫码关注云+社区