先後端分離中，Gulp實現頭尾等公共頁面的複用

時間 2019-11-06

原文原文鏈接

前言

一般咱們所作的一些頁面，咱們能夠從設計圖裏面看出有一些地方是相同的。例如：頭部，底部，側邊欄等等。若是先後端分離時，製做靜態頁面的同窗，對於這些重複的部分只可以經過複製粘貼到新的頁面來，若是頁面的數量上去了而中途公共的部分出現要修的地方。不過有上10個頁面都用到了這個公共的html代碼。那修改起來不是很麻煩嗎？html

一些其餘方法好比ifram，import都不夠優雅，而且源代碼中的不顯示的，也就不利於SEOnode

頭部：npm

尾部：gulp

對於後端的同窗而言，他們能夠經過模版來進行拆分。這樣作能夠提升html代碼的複用性和可維護性。但對於只是對設計圖而製做成靜態頁面的同窗而言他們，html沒有提供像模版的include這種方法。但又不想使用到後端的模版，那麼接下來的我介紹的幾個工具也許能夠幫助到你。後端

gulp-file-include

第一個我要介紹的是一個gulp的插件，他提供了一個include的方法讓咱們能夠想後端模版同樣把公共的部分分離出去。並且提供的include方法有許多配置項，詳細能夠去看看 gulp-file-include。前後端分離

下面咱們寫一個小demo來快速的瞭解一下，咱們須要先安裝gulp以及gulp-file-include。工具

npm install -g gulp
mkdir gulp-file-include && cd gulp-file-include
npm install  gulp --save-dev
npm install gulp-file-include --save-dev

安裝好以後，來簡單的組織一下文件的目錄：ui

|-node_modules
|-page // 生產環境的 html 存放文件夾
    |-include // 公共部分的 html 存放文件夾
    |-*.html 
|-dist // 編輯後的 html 文件
gulpfile.js

在新建的gulpfile.js，配置好gulp-file-include：spa

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'));
});

接着新建兩個html文件，分別是頭部和底部：插件

header.html

<h1>這是 header 的內容</h1>

footer.html

<h1>這是 footer 的內容</h1>

最後在新建一個html，把要用到的header和footer給include進來。

layout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    @@include('include/header.html')

    <p> 這是 layout 的內容 </p>

    @@include('include/footer.html')
</body>
</html>