快捷導(dǎo)航

靜態(tài)頁(yè)面實(shí)現(xiàn) include 引入公用代碼的示例

更新時(shí)間：2017年09月25日 08:03:43 作者：幸好我是程序猿

下面小編就為大家?guī)?lái)一篇靜態(tài)頁(yè)面實(shí)現(xiàn) include 引入公用代碼的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一直以來(lái)，我司的前端都是用 php 的 include 函數(shù)來(lái)實(shí)現(xiàn)引入 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>頁(yè)面主體部分</div>
  <?php include('footer.php'); ?>
</body>
</html>

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

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

直到最近某個(gè)項(xiàng)目需要做一個(gè) webapp，是通過(guò) HBuilder 將靜態(tài)頁(yè)面打包成 APP，這就讓我碰到難題了。

如果是小項(xiàng)目，那就直接手動(dòng)多復(fù)制粘貼幾遍，但如果頁(yè)面較多，復(fù)制粘貼的方案明顯不靠譜，維護(hù)成本也高。

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

1、安裝 gulp 和 gulp-file-include

首先新建個(gè)文件夾，在終端里定位到文件夾的位置，然后進(jìn)行 npm 初始化

npm init

然后安裝 gulp

npm install gulp --save-dev

接著安裝 gulp-file-include

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

2、新建并配置 gulpfile.js

接著我們手動(dòng)新建一個(gè) js 文件取名為 gulpfile，并在里面寫(xiě)入如下代碼：

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、創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)，并添加測(cè)試代碼

項(xiàng)目的整體目錄結(jié)構(gòu)應(yīng)該是這樣

app

　page

　　include

　　　header.html

　　　footer.html

　　index.html

　gulpfile.js

　package.json

然后我們添加測(cè)試代碼，header.html 和 footer.html 沒(méi)太多好說(shuō)的，主要是 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>頁(yè)面主體部分</div>
  @@include('include/footer.html')
</body>
</html>

4、運(yùn)行

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

gulp fileinclude

會(huì)發(fā)現(xiàn)，多了個(gè) dist 文件夾，里面有一個(gè) index.html 文件，gulp-file-include 已經(jīng)幫我們把最終編譯好的 index.html 文件生成好了。

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

gulp.dest('dist')

5、自動(dòng)編譯

靜態(tài)頁(yè)面引入公用代碼的問(wèn)題已經(jīng)解決了，但每次編寫(xiě)源 html 后，都要去終端里手動(dòng)執(zhí)行下編譯操作還是很麻煩，那能不能讓文件自動(dòng)編譯呢？答案一定是可以的。

gulp 有個(gè) watch 方法，就是監(jiān)聽(tīng)文件是否有變動(dòng)的，我們只需稍微修改下 gulpfile.js 文件，增加一段監(jiān)聽(tīng)代碼，如下：

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

寫(xiě)好之后，我們只需在終端里執(zhí)行