使用 gulp-file-include 构建前端静态页面

时间 2019-11-13

标签使用 gulp file include 构建前端静态页面栏目 JavaScript 繁體版

原文原文链接

前言

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

不少时候咱们在写静态页面的时候也但愿能和后台模板同样，将导航、页头、页脚等公用的部分分离出去，而后引入页面中。单纯的静态页面不具有这种功能，而使用 gulp 插件能够很容易的完成，好比 gulp-file-include 插件。前端

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

目录及配置文件

基本的目录结构以下，实际项目可能须要更精细的结构。gulp

做为引入文件的插件，并无太多的配置参数，基本的 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.htmlui

<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>

编译结果：url

<!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>

面包屑

面包屑也是经常使用的功能，不过有些时候并不须要前端构建的方式生成，在此做为一个案例来讲明吧。生成面包屑的方法不少，我使用了传参的方法，经过传递一个导航路径数组，而后循环生成面包屑。由于面包屑的最后一项没有链接，因此循环要分两次执行。具体方法以下：spa

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 中寻找答案！