靜態頁面如何實現 include 引入公用代碼

時間 2019-11-06

原文原文鏈接

　　一直以來，我司的前端都是用 php 的 include 函數來實現引入 header 、footer 這些公用代碼的，就像下面這樣：javascript

<!-- index.php -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <?php include('header.php'); ?>
    <div>頁面主體部分</div>
    <?php include('footer.php'); ?>
</body>
</html>

<!-- header.php -->
<header>這是頭部</header>

<!-- footer.php -->
<footer>這是底部</footer>

　　直到最近某個項目須要作一個 webapp，是經過 HBuilder 將靜態頁面打包成 APP，這就讓我碰到難題了。php

　　若是是小項目，那就直接手動多複製粘貼幾遍，但若是頁面較多，複製粘貼的方案明顯不靠譜，維護成本也高。html

　　在查了不少資料後，最終肯定用 gulp 來解決，具體操做以下：前端

一、安裝 gulp 和 gulp-file-include

　　首先新建個文件夾，在終端裏定位到文件夾的位置，而後進行 npm 初始化java

npm initgit

　　而後安裝 gulpgithub

npm install gulp --save-devweb

　　接着安裝 gulp-file-includenpm

npm install gulp-file-include --save-devjson

二、新建並配置 gulpfile.js

　　接着咱們手動新建一個 js 文件取名爲 gulpfile，並在裏面寫入以下代碼：

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

三、建立項目目錄結構，並添加測試代碼

　　項目的總體目錄結構應該是這樣

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

　　而後咱們添加測試代碼，header.html 和 footer.html 沒太多好說的，主要是 index.html 要特別注意引入的方式，代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    @@include('include/header.html')
    <div>頁面主體部分</div>
    @@include('include/footer.html')
</body>
</html>

四、運行

　　在終端裏敲入如下代碼，看執行效果

gulp fileinclude

　　會發現，多了個 dist 文件夾，裏面有一個 index.html 文件，gulp-file-include 已經幫咱們把最終編譯好的 index.html 文件生成好了。

　　可能你已經能觸類旁通了，在 gulpfile.js 裏，咱們能夠手動設置最終生成文件的位置，就是這句話

gulp.dest('dist')

五、自動編譯

　　靜態頁面引入公用代碼的問題已經解決了，但每次編寫源 html 後，都要去終端裏手動執行下編譯操做仍是很麻煩，那能不能讓文件自動編譯呢？答案必定是能夠的。

　　gulp 有個 watch 方法，就是監聽文件是否有變更的，咱們只需稍微修改下 gulpfile.js 文件，增長一段監聽代碼，以下：

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

gulp.task('watch', function () {
    gulp.watch('page/**/*.html', ['fileinclude']);
});

　　寫好以後，咱們只需在終端裏執行