前言

虽然现在单页面很流行，但是在 PC 端多页面还是常态，所以构建静态页面的工具还有用武之地。最近也看到了一些询问如何 include HTML 文件的问题。

很多时候我们在写静态页面的时候也希望能和后台模板一样，将导航、页头、页脚等公用的部分分离出去，然后引入页面中。单纯的静态页面不具备这种功能，而使用 gulp 插件可以很容易的完成，比如 gulp-file-include 插件。

官网对于插件的基本使用已经说得很详细，但是对于一些具体的场景并没有举例，所以初次接触还是还是会有疑惑，比如具有选中状态的导航条怎么做、面包屑怎么做。本文的主要目的就是给出两个例子的解决方案。

目录及配置文件

基本的目录结构如下，实际项目可能需要更精细的结构。

作为引入文件的插件，并没有太多的配置参数，基本的 gulpfile 如下，更详细的配置参见官网。

var gulp = require('gulp'),

    fileinclude = require('gulp-file-include');

gulp.task('fileinclude', function() {

    gulp.src(['./src/*.html'])//主文件

        .pipe(fileinclude({

            prefix: '@@',//变量前缀 @@include

            basepath: './src/_include',//引用文件路径

            indent:true//保留文件的缩进

        }))

        .pipe(gulp.dest('./dist'));//输出文件路径

});

导航条

导航条是主要的引用内容，但是一般当前页面的导航都会有选中效果，那么就要使用 gulp-file-include 的判断功能。后台模板统一引入后也要考虑链接的选中问题。之前公司在用后台模板的时候就遇到过这个问题。其实无论是后台还是前台，在引入导航条这个问题上的解决方法差不多，都是在当前页面定义一个私有变量，通过这个变量来设置链接的选中效果，而 gulp-file-include 的变量通过传参实现。具体方法如下：

index.html

<!DOCTYPE html>

<html>

  <body>

  @@include('./navbar.html',{

     "index": "active"

   })

  </body>

</html>

navbar.html

<ul class="navbar">

    <li @@if (context.index==='active' ) { class="active" }>

        <a href="index.html">首页</a>

    </li>

    <li @@if (context.about==='active' ) { class="active" }>

        <a href="about.html">关于</a>

    </li>

    <li @@if (context.contact==='active' ) { class="active" }>

        <a href="contact.html">联系我们</a>

    </li>

</ul>

编译结果：

<!DOCTYPE html>

<html>

  <body>

  <ul class="navbar">

      <li  class="active" >

          <a href="index.html">首页</a>

      </li>

      <li >

          <a href="about.html">关于</a>

      </li>

      <li >

          <a href="contact.html">联系我们</a>

      </li>

  </ul>

  </body>

</html>

面包屑

面包屑也是常用的功能，不过有些时候并不需要前端构建的方式生成，在此作为一个案例来说明吧。生成面包屑的方法很多，我使用了传参的方法，通过传递一个导航路径数组，然后循环生成面包屑。因为面包屑的最后一项没有连接，所以循环要分两次执行。具体方法如下：

index.html

<!DOCTYPE html>

<html>

  <body>

    @@include('./breadcrumb.html',{

        "title":"首页",

        "breadcrumb":[{

            "url":"...",

            "text":"首页"

        },{

            "url":"...",

            "text":"链接一"

        },{

            "url":"",

            "text":"链接二"

        }]

    })

  </body>

</html>

breadcrumb.html

<div class="page-header">

    <h2>@@title</h2>

    <ol class="breadcrumb">

    @@for (var i = 0; i < (context.breadcrumb.length-1); i++) {

        <li><a href="`+context.breadcrumb[i].url+`">`+context.breadcrumb[i].text+`</a></li>

    }

    <!-- 面包屑最后一项无链接 -->

    @@for (var i = (context.breadcrumb.length-1); i < context.breadcrumb.length; i++) {

        <li><strong>`+context.breadcrumb[i].text+`</strong></li>

    }

    </ol>

</div>

编译结果：

<!DOCTYPE html>

<html>

  <body>

  <div class="page-header">

      <h2>首页</h2>

      <ol class="breadcrumb">

          <li><a href="...">首页</a></li>

          <li><a href="...">链接一</a></li>

      <!-- 面包屑最后一项无链接 -->

          <li><strong>链接二</strong></li> 

      </ol>

  </div>

  </body>

</html>

结论

gulp-file-include 插件的使用非常简单，如果实际项目中遇到更复杂的情况，还需要仔细阅读官方文档，也可以在 Github 的 Issues 中寻找答案！

使用 gulp-file-include 构建前端静态页面的更多相关文章

  1. H5商城，纯前端静态页面

    发布时间:2018-09-28   技术:jquery1.10.1+swipeSlide+jquery.mmenu+jquery.touchSwipe+cityinit   概述 纯手写H5商城,2年 ...

  2. 利用VS Code在Azure上构建部署静态页面

    0x00 前言 前一段时间,我找到了Jendrik Illner的个人网站.除了那里的精彩文章,网站的主题也吸引了我的注意力,而且我发现该网站的主题采用了Hugo的Academic主题. 然后,我认为 ...

  3. 用gulp替代fekit构建前端项目

    https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反, ...

  4. Web前端静态页面示例

    目录结构: Web25\ |—css\ reset.css.common.css.index.css.login.css.reg.css |—js\ jquery-3.3.1.js.index.js. ...

  5. iviewUI 前端静态页面实现增删改查分页

    完整代码部分 (仅供参考哈): <template> <div> <label prop="name"> 姓名: </label> ...

  6. vue前端静态页面Github Pages线上预览实现

    一.前期准备之项目编译 此处记录如何解决vue2.0 打包之后,打开index.html出现空白页的问题,附上@参考地址 打包之前修改三个文件 第一步,找到build文件,在webpack.prod. ...

  7. DataTables学习：从最基本的入门静态页面，使用ajax调用Json本地数据源实现前端开发深入学习，根据后台数据接口替换掉本地的json本地数据，以及报错的处理地方，8个例子（显示行附加信息，回调使用api，动态显示和隐藏列...），详细教程

    一.DataTables  个人觉得学习一门新的插件或者技术时候,官方文档是最根本的,入门最快的地方,但是有时候看完官方文档,一步步的动手写例子,总会出现各种莫名其妙的错误,需要我们很好的进行研究出错 ...

  8. 利用fis3构建前端项目工程

    FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先 ...

  9. [转]gulp构建前端工程

    摘要: Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript. ...

随机推荐

  1. C++ Primer Plus 6 第一章

    一.机器语言.汇编语言.C\C++.高级语言 机器语言:机器真正识别,能在机器上运行的语言. 汇编语言:低级语言,直接操作硬件,如直接访问cpu寄存器和内存单元.不具有移植性.因为不同的平台对应的硬件 ...

  2. codevs 种树3

    codevs上的题目,自从wikioi改名后,就不怎么做题了. 这道题的话注释在代码中就可以了,还是求最长路,相较返回如果中间可以种多个的话,那就种越多越好,因为这样可以减少种的棵树, 所以这个i与i ...

  3. http://codeforces.com/problemset/problem/594/A

    A. Warrior and Archer time limit per test 2 seconds memory limit per test 256 megabytes input standa ...

  4. PHP通过URL获取文件大小

    function getFileSize($url){ $url = parse_url($url); if($fp = @fsockopen($url['host'],empty($url['por ...

  5. ESLint可共享配置发布，团队自定义ESLint规则新鲜出炉

    ESLint于2013年6月份推出,至今4个年头,最新版本v4.8.0.它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如Airbnb和Google均有一套自己的Java ...

  6. ServiceStack.Text / Newtonsoft.Json 两种json序列化性能比较

    JSON序列化现在应用非常多,尤其在前后端分离的情况下,平常大多数C#下都使用Newtonsoft.Json来操作,量少的情况下,还可以忽略,但量大的情况下就要考虑使用ServiceStack.Tex ...

  7. 更新——Canvas画布动画效果之实现倒计时

    Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...

  8. 热门开源项目：Guns-后台管理系统

    Guns基于SpringBoot,致力于做更简洁的后台管理系统,完美整合springmvc + shiro + mybatis-plus + beetl!Guns项目代码简洁,注释丰富,上手容易,同时 ...

  9. Android模拟器检测常用方法

    在Android开发过程中,防作弊一直是老生常谈的问题,而模拟器的检测往往是防作弊中的重要一环,接下来有关于模拟器的检测方法,和大家进行一个简单的分享. 1.传统的检测方法. 传统的检测方法主要是对模 ...

  10. AspxGridView控件的使用

    在网上找到的不错的资料: http://www.lmwlove.com/ai/SubjectID6 以下是自我总结: 要实现的功能:使用AspxGridView显示Scott数据库中emp与dept两 ...