下面小編就為大家帶來一篇靜態頁面實作 include 引入公用程式碼的範例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧
一直以來，我司的前端都是用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'); ?>
<p>页面主体部分</p>
<?php include('footer.php'); ?>
</body>
</html>
登入後複製
<!-- header.php -->
<header>这是头部</header>
登入後複製
<!-- footer.php -->
<footer>这是底部</footer>
登入後複製
直到最近某個專案需要做一個webapp，是透過HBuilder 將靜態頁面打包成APP，這就讓我碰到難題了。
如果是小項目，那就直接手動多複製貼上幾遍，但如果頁面較多，複製貼上的方案明顯不可靠，維護成本也高。
在查了很多資料後，最後確定用gulp 來解決，具體操作如下：
#1、安裝gulp 和gulp-file-include
先新建個資料夾，在終端機定位到資料夾的位置，然後進行npm 初始化
然後安裝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')
<p>页面主体部分</p>
@@include('include/footer.html')
</body>
</html>
登入後複製
4、執行
在終端機裡敲入以下程式碼，看看執行效果
會發現，多了個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']);
});登入後複製
寫好之後，我們只要在終端機裡執行
我們每次儲存來源html 後，gulp 就會自動幫我們編譯一遍。
至此，靜態頁面如何實作 include 引入公用程式碼的問題，順利解決，最後附上相關資料。
以上是有關靜態頁面實作include引入公用程式碼實例展示的詳細內容。更多資訊請關注PHP中文網其他相關文章！
