include引入公用程式碼實作方法-js教程-PHP中文網

include引入公用程式碼實作方法

小云云

發布： 2018-02-02 13:08:21

原創

2926 人瀏覽過

一直以來，我司的前端都是用 php 的 include 函數來實現引入 header 、footer 這些公用程式碼的，本文主要為大家帶來一篇靜態頁面實作 include 引入公用程式碼的範例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

就像下面這樣：

<!-- 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(&#39;header.php&#39;); ?>
  <p>页面主体部分</p>
  <?php include(&#39;footer.php&#39;); ?>
</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(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});

登入後複製

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(&#39;include/header.html&#39;)
  <p>页面主体部分</p>
  @@include(&#39;include/footer.html&#39;)
</body>
</html>

登入後複製

4、執行

在終端機裡敲入以下程式碼，看看執行效果

gulp fileinclude

登入後複製

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

可能你已經可以舉一反三了，在gulpfile.js 裡，我們可以手動設定最終產生檔案的位置，就是這句話

gulp.dest(&#39;dist&#39;)

登入後複製

#5、自動編譯靜態頁面引入公用程式碼的問題已經解決了，但每次寫原始碼html 後，都要去終端機手動執行下編譯操作還是很麻煩，那能不能讓檔案自動編譯呢？答案一定是可以的。

gulp 有個watch 方法，就是監聽文件是否有變動的，我們只要稍微修改下gulpfile.js 文件，增加一段監聽程式碼，如下：

var gulp = require(&#39;gulp&#39;);
var fileinclude = require(&#39;gulp-file-include&#39;);
 
gulp.task(&#39;fileinclude&#39;, function () {
  // 适配page中所有文件夹下的所有html，排除page下的include文件夹中html
  gulp.src([&#39;page/**/*.html&#39;, &#39;!page/include/**.html&#39;])
    .pipe(fileinclude({
      prefix: &#39;@@&#39;,
      basepath: &#39;@file&#39;
    }))
    .pipe(gulp.dest(&#39;dist&#39;));
});
 
gulp.task('watch', function () {
  gulp.watch('page/**/*.html', ['fileinclude']);
});

登入後複製

寫好之後，我們只要在終端機裡執行