- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) > web開(kāi)發(fā) >
- 靜態(tài)頁(yè)面如何實(shí)現include引入公用代碼
小編給大家分享一下靜態(tài)頁(yè)面如何實(shí)現include引入公用代碼，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
一直以來(lái)，我司的前端都是用 php 的 include 函數來(lái)實(shí)現引入 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è)項目需要做一個(gè) webapp，是通過(guò) HBuilder 將靜態(tài)頁(yè)面打包成 APP，這就讓我碰到難題了。
如果是小項目，那就直接手動(dòng)多復制粘貼幾遍，但如果頁(yè)面較多，復制粘貼的方案明顯不靠譜，維護成本也高。
在查了很多資料后，最終確定用 gulp 來(lái)解決，具體操作如下：
1、安裝 gulp 和 gulp-file-include
首先新建個(gè)文件夾，在終端里定位到文件夾的位置，然后進(jìn)行 npm 初始化
npm init
然后安裝 gulp
npm install gulp --save-dev
接著(zhù)安裝 gulp-file-include
npm install gulp-file-include --save-dev
2、新建并配置 gulpfile.js
接著(zhù)我們手動(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 )建項目目錄結構，并添加測試代碼
項目的整體目錄結構應該是這樣
app page include header.html footer.html index.html gulpfile.js package.json
然后我們添加測試代碼，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、運行
在終端里敲入以下代碼，看執行效果
gulp fileinclude
會(huì )發(fā)現，多了個(gè) dist 文件夾，里面有一個(gè) index.html 文件，gulp-file-include 已經(jīng)幫我們把最終編譯好的 index.html 文件生成好了。
可能你已經(jīng)能舉一反三了，在 gulpfile.js 里，我們可以手動(dòng)設置最終生成文件的位置，就是這句話(huà)
gulp.dest('dist')5、自動(dòng)編譯
靜態(tài)頁(yè)面引入公用代碼的問(wèn)題已經(jīng)解決了，但每次編寫(xiě)源 html 后，都要去終端里手動(dòng)執行下編譯操作還是很麻煩，那能不能讓文件自動(dòng)編譯呢？答案一定是可以的。
gulp 有個(gè) watch 方法，就是監聽(tīng)文件是否有變動(dòng)的，我們只需稍微修改下 gulpfile.js 文件，增加一段監聽(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ě)好之后，我們只需在終端里執行
gulp watch
我們每次保存源 html 后，gulp 就會(huì )自動(dòng)幫我們編譯一遍。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系站長(cháng)郵箱：ts@56dr.com進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。
Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技 版權所有 珠海市特網(wǎng)科技有限公司 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2 建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
