专栏首页web开发gulp实现公共html代码复用

gulp实现公共html代码复用

在开发网站的时候,尤其是类似于官网这样的项目,顶部都会有一个导航栏,底部会有一些其他信息,而这两个部分在每一个页面都是有的。我们不可能在每个html页面都写一遍,这样也不便后期维护等操作,所以可以把顶部导航和底部这两块的html代码单独写在两个html文件里:header.html和footer.html,然后在每个html文件只需要在适当的位置引入公共部分的代码即可。gulp有一个插件gulp-file-include即可实现该操作,gulp编译完成之后,便可在每个html文件里自动加上公共部分的代码。现写一个简单的小demo如下:

1、新建一个项目demo,我这里取名为:gulp

demo目录如下

2、在gulp目录下安装gulp插件

  1、执行:gulp init 命令,一直回车,然后生成一个package.json文件

  2、安装gulp:npm install gulp --save-dev

  3、安装gulp-file-include:npm install gulp-file-include --save-dev

3、在src/include目录下新建三个html文件

  这里的文件便是公共的html部分,是要在每个html页面被引入的。

3.1、meta.html:

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试文件引入</title>
<meta name="keywords" content="aa,bb,cc,dd,ee,ff">
<meta name="description" content="1234567890">
<link rel="icon" sizes="any" mask="" href="" />
<link rel="stylesheet" type="text/css" href="/dist/css/common.css" />
<meta name="format-detection " content="telephone=no">

3.2、header.html

<div>
    <button><a href="/index.html">首页</a></button>
    <button><a href="/trade-news.html">行业新闻</a></button>
    <button><a href="/product/product.html">公司产品</a></button>
    <button><a href="/contact.html">联系我们</a></button>
</div>

3.3、footer.html

<div>这是footer部分</div>

4、在pages目录下新建几个html页面,在每个页面的适当位置引入include目录下的html文件

注意:@@include后面填写的是相对路径

4.1、src/pages/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    @@include('../include/meta.html')

</head>
<body>
@@include('../include/header.html')
<div>首页</div>
@@include('../include/footer.html')
</body>
</html>

4.2、src/pages/product/product.html

<!DOCTYPE html>
<html lang="en">
<head>
    @@include('../../include/meta.html')
</head>
<body>
@@include('../../include/header.html')
<div>公司产品页</div>
@@include('../../include/footer.html')
</body>
</html>

其他就省略

5、gulpfile.js文件

/**
 * Created by libo on 2017/12/21.
 */
var gulp = require('gulp');
var fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function () {
    gulp.src('src/pages/**/*.html')
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest('dist'));
});

6、执行gulp fileinclude 命令

然后在gulp项目下会生成一个dist目录,相应编译好的html文件都在该目录下。

比如:dist目录下index.html文件的代码如图:

7、页面效果

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Gulp实现css、js、图片的压缩以及css、js文件的MD5命名

    目前做代码压缩合并的工具有很多,诸如gulp,webpack,grunt等等,可以说这些项目构建工具的功能非常之强大:图片压缩、图片转base64、css和js...

    用户1174387
  • Vue项目图片剪切上传——vue-cropper的使用

    最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求。上网百度了一番,发现好多用的都是vue-croppe...

    用户1174387
  • VUE滚动条插件——vue-happy-scroll

    最近自己在自学vue2.0,然后就自己摸索做一个简单的后台管理系统,在做的过程中,总感觉不同浏览器自带的滚动条样式不统一,也很难看,所以就在网上找一些使用vue...

    用户1174387
  • Qt Creator和VS2010中添加槽信号_差异与详解

    2.点击mainwindow打开设计窗体在窗体上添加一个PushButton。点击右键先把转到槽

    战神伽罗
  • 四象限分析法分析你是否适合做管理

    四象限分析法又称波士顿矩阵,使用二维四象限对两个维度的变量进行分析,四个象限代表不同的战略,根据战略不同用于进行不同的决策。决策有两类四象限分析法被单独作为分析...

    静儿
  • Fiddler使用:菜单功能/Host配置/请求伪造接口调试

    Replay回放按钮:比较常用,捕捉到一个会话之后想回放这个会话,就可以点这个按钮。

    软测小生
  • [译]Tornado异步非阻塞I/O

    Tornado 4.3于2015年11月6日发布,该版本正式支持Python3.5的async/await关键字,并且用旧版本CPython编译Tornado同...

    Jintao Zhang
  • Python-数据挖掘-贴吧案例-下

    ① 提示用户输入要爬取的爬取名,以及要查询的起始页和结束页。然后,使用 urllib.parse.urlencode() 对 url 参数进行转码,组合成一个完...

    小团子
  • Java使用 POI 操作Excel

    Java中常见的用来操作 Excel 的方式有2种:JXL和POI。JXL只能对 Excel进行操作,且只支持到 Excel 95-2000的版...

    宋先生
  • 为什么真正的人工智能不从深度学习中获得?

    尽管深度学习前景光明也取得一些初步的成功,但它实际上可能会阻碍真正的人工智能的发展。 ? 人工智能是一个包含许多概念和开发方法的强有力的保护伞。这些不同但不排他...

    灯塔大数据

扫码关注云+社区

领取腾讯云代金券