資訊專(zhuān)欄INFORMATION COLUMN
摘要：安裝好之后，來(lái)簡(jiǎn)單的組織一下文件的目錄生產(chǎn)環(huán)境的存放文件夾公共部分的存放文件夾編輯后的文件在新建的，配置好接著新建兩個(gè)文件，分別是頭部和底部這是的內(nèi)容這是的內(nèi)容最后在新建一個(gè)，把要用到的和給進(jìn)來(lái)。
前言
通常我們所做的一些頁(yè)面，我們可以從設(shè)計(jì)圖里面看出有一些地方是相同的。例如：頭部，底部，側(cè)邊欄等等。如果是制作靜態(tài)頁(yè)面的同學(xué)，對(duì)于這些重復(fù)的部分只能夠通過(guò)復(fù)制粘貼到新的頁(yè)面來(lái)，如果頁(yè)面的數(shù)量上去了而中途公共的部分出現(xiàn)要修的地方。不過(guò)有上10個(gè)頁(yè)面都用到了這個(gè)公共的html代碼。那修改起來(lái)不是很麻煩嗎？
拿sf來(lái)說(shuō)，他們的頭部和底部在每一頁(yè)都是一樣的（有些頁(yè)面不同）：
↑頭部↑
↓底部↓
對(duì)于后端的同學(xué)而言，他們可以通過(guò)模版來(lái)進(jìn)行拆分。這樣做可以提高html代碼的復(fù)用性和可維護(hù)性。但對(duì)于只是對(duì)設(shè)計(jì)圖而制作成靜態(tài)頁(yè)面的同學(xué)而言他們，html沒(méi)有提供像模版的include這種方法。但又不想使用到后端的模版，那么接下來(lái)的我介紹的幾個(gè)工具也許可以幫助到你。
gulp-file-include第一個(gè)我要介紹的是一個(gè)gulp的插件，他提供了一個(gè)include的方法讓我們可以想后端模版一樣把公共的部分分離出去。而且提供的include方法有許多配置項(xiàng)，詳細(xì)可以去看看 gulp-file-include。
下面我們寫(xiě)一個(gè)小demo來(lái)快速的了解一下，我們需要先安裝gulp以及gulp-file-include。
npm install -g gulp mkdir gulp-file-include && cd gulp-file-include npm install gulp --save-dev npm install gulp-file-include
安裝好之后，來(lái)簡(jiǎn)單的組織一下文件的目錄：
|-node_modules
|-src // 生產(chǎn)環(huán)境的 html 存放文件夾
|-include // 公共部分的 html 存放文件夾
|-*.html
|-dist // 編輯后的 html 文件
gulpfile.js
在新建的gulpfile.js，配置好gulp-file-include：
var gulp = require("gulp");
var fileinclude = require("gulp-file-include");
gulp.task("fileinclude", function() {
gulp.src("src/**.html")
.pipe(fileinclude({
prefix: "@@",
basepath: "@file"
}))
.pipe(gulp.dest("dist"));
});
接著新建兩個(gè)html文件，分別是頭部和底部：
header.html
這是 header 的內(nèi)容
footer.html
這是 footer 的內(nèi)容
最后在新建一個(gè)html，把要用到的header和footer給include進(jìn)來(lái)。
layout.html
Document
@@include("include/header.html")
這是 layout 的內(nèi)容
@@include("include/footer.html")
最后回到命令行工具里，執(zhí)行gulp fileinclude：
看到編譯完成之后，到dist目錄一下有一個(gè)layout.html的文件，這就是最后編譯出來(lái)的。
好了，上面的一個(gè)小實(shí)例也明白之后。也許能夠在以后的工作中大大提供生產(chǎn)力，使得自己寫(xiě)的html代碼更加具有維護(hù)性和可復(fù)用性。
前端模版上面說(shuō)道gulp-file-include簡(jiǎn)單而且易上手，對(duì)于不想使用模版的同學(xué)是一個(gè)很好的小工具。但是熟悉前端模版的同學(xué)來(lái)說(shuō)，我們一樣可以使用模版來(lái)做到html代碼的維護(hù)性和可復(fù)用性。那么我就用一個(gè)我自己比較常用的ejs這個(gè)模版來(lái)說(shuō)說(shuō)一下如何分離那些公共部分的html文件。
把上一個(gè)例子的整個(gè)文件夾復(fù)制到一個(gè)新的地方，然后把名字修改為ejs。接著把node_modules文件夾給刪除，dist文件夾下的html文件都刪除。
用到ejs模版的話，需要把src里面的html文件的后綴名都修改成.ejs。把ejs文件編譯成html的工具依舊是使用gulp。只需要安裝gulp-ejs就可以了。
npm install gulp --save-dev npm install gulp-ejs --save-dev
接著就是修改gulpflie.js文件了：
var gulp = require("gulp");
var ejs = require("gulp-ejs");
gulp.task("ejs", function() {
gulp.src("src/**.ejs")
.pipe(ejs())
.pipe(gulp.dest("dist"));
});
然后是修改layout.ejs文件：
Document
<%-include include/header %>
這是 layout 的內(nèi)容
<%-include include/footer %>
最后就是在命令行工具里面運(yùn)行gulp ejs，在到dist目錄下看到編譯好的layout.html文件。就大功告成了。
其實(shí)模版具有許多強(qiáng)大的方法，而上面的例子主要還是演示include這個(gè)方法，可能會(huì)覺(jué)得有點(diǎn)大才小用。有興趣的同學(xué)可以再去了解一下模版的一些方法。
總結(jié)有了前面所說(shuō)的工具和模版之后，作為一些切圖制作靜態(tài)頁(yè)面的小苦逼也能夠大大的提升自己的開(kāi)發(fā)效率，再也不用因?yàn)橐薷墓膊糠侄械奖紳?。這樣我們就能夠把剩下的時(shí)間都拿去泡妞（逃。
如果你又什么好的工具或者建議，希望能夠和我交流。與sf各位共勉。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/49598.html
摘要：為什么說(shuō)最佳實(shí)踐是呢簡(jiǎn)單來(lái)說(shuō)，就是這類(lèi)預(yù)處理器在提供一定的抽象能力的同時(shí)，也不會(huì)破壞自身的特性。就語(yǔ)義化這件事情而言，如果你的是基于標(biāo)準(zhǔn)來(lái)編寫(xiě)的，意味著你的頁(yè)面具備更多的可能性。 原文：https://github.com/kuitos/kuitos.github.io/issues/33 15年年末寫(xiě)了篇關(guān)于BEM方法論(實(shí)踐上內(nèi)容并不是原BEM)的文章，文末給自己挖了個(gè)坑說(shuō)要聊聊w...
摘要：若自定義元素標(biāo)簽名稱(chēng)不可用則摒棄?？傊?，自定義元素讓開(kāi)發(fā)者的代碼更易理解和維護(hù)，并分割為小型，可復(fù)用及可封裝的模塊。被稱(chēng)為自定義元素接口，雖然現(xiàn)在仍然可用，但是已經(jīng)被棄用并被認(rèn)為是糟糕的實(shí)現(xiàn)。 原文請(qǐng)查閱這里，略有刪減，本文采用知識(shí)共享署名 4.0 國(guó)際許可協(xié)議共享，BY Troland。 這是 JavaScript 工作原理第十九章。 概述 在 前述文章中，我們介紹了 Shadow ...
摘要：接下來(lái)，由簡(jiǎn)入繁依次實(shí)現(xiàn)提示組件的各個(gè)功能。那么第一個(gè)提示的定時(shí)器依然會(huì)錯(cuò)誤的關(guān)閉新提示。增強(qiáng)靈活性最后則是讓提示組件更靈活。 這次的教程里，我們要把組件化進(jìn)行到底！最近半年的幾個(gè)項(xiàng)目中，都遇到了需要使用Toast或者Notification組件的情況。在目前已有的一些基于Vue.js開(kāi)發(fā)的組件庫(kù)，都沒(méi)有找到太合適的，所以自己重頭實(shí)現(xiàn)了一個(gè)。歷經(jīng)幾個(gè)項(xiàng)目的磨練，這個(gè)提示組件的功能已經(jīng)越...
摘要：后端的動(dòng)態(tài)模板后端通常會(huì)使用模板文件來(lái)動(dòng)態(tài)返回前端頁(yè)面。后端代碼調(diào)用文件可以看作是函數(shù)調(diào)用。這里雖然處理的是后端模板文件和前端的一個(gè)結(jié)合，但其思想可以利用在別的地方。 后端的動(dòng)態(tài)模板 Java后端通常會(huì)使用ftl（freemarker template language）模板文件來(lái)動(dòng)態(tài)返回前端頁(yè)面。這個(gè)工作，通常還可以用jsp、php文件來(lái)實(shí)現(xiàn)。但這些動(dòng)態(tài)模板的實(shí)現(xiàn)，通常是在已有的ht...
閱讀 3124·2021-11-24 09:39
閱讀 986·2021-09-07 10:20
閱讀 2406·2021-08-23 09:45
閱讀 2282·2021-08-05 10:00
閱讀 582·2019-08-29 16:36
閱讀 846·2019-08-29 11:12
閱讀 2831·2019-08-26 11:34
閱讀 1848·2019-08-26 10:56
