靜態頁面實現 include 引入公用代碼的示例

2019-11-19 15:19:03

字體：大中小

來源：轉載

供稿：網友

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

<!-- 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，這就讓我碰到難題了。

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

在查了很多資料后，最終確定用 gulp 來解決，具體操作如下：

1、安裝 gulp 和 gulp-file-include

首先新建個文件夾，在終端里定位到文件夾的位置，然后進行 npm 初始化

npm init

然后安裝 gulp

npm install gulp --save-dev

接著安裝 gulp-file-include

npm install gulp-file-include --save-dev

2、新建并配置 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'));});

3、創建項目目錄結構，并添加測試代碼

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

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>

4、運行

在終端里敲入以下代碼，看執行效果

gulp fileinclude

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

可能你已經能舉一反三了，在 gulpfile.js 里，我們可以手動設置最終生成文件的位置，就是這句話

gulp.dest('dist')

5、自動編譯

靜態頁面引入公用代碼的問題已經解決了，但每次編寫源 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']);});

寫好之后，我們只需在終端里執行