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