|
web 開發(fā)團(tuán)隊(duì)的一個常見實(shí)踐是創(chuàng)建一組標(biāo)準(zhǔn)文件，團(tuán)隊(duì)成員基于它們開始 web 開發(fā)流程，包括一個公共文件結(jié)構(gòu)、基本命名慣例和標(biāo)準(zhǔn)庫。這樣做能夠更容易啟動并運(yùn)行一個項(xiàng)目。它還能將開發(fā)人員引向內(nèi)部編碼標(biāo)準(zhǔn)并實(shí)施標(biāo)準(zhǔn)文件組織。HTML5 Boilerplate 就是這種處于 web 開發(fā)最前沿的完美理念的實(shí)現(xiàn)。 結(jié)合了使用 HTML5 需要的幾個增強(qiáng)和許多其他最佳實(shí)踐，只需最少的前期投資，HTML5 Boilerplate 就能為您的項(xiàng)目提供一個堅(jiān)如磐石的基礎(chǔ)。本文簡述了使用 HTML5 Boilerplate 來開始一個項(xiàng)目的方法，展示了一些能夠?qū)ζ溥M(jìn)行調(diào)優(yōu)，使其適應(yīng)一個已有框架和編碼風(fēng)格的方法。 HTML5 組件HTML5 Boilerplate 的核心是用于幫助開發(fā) HTML5 站點(diǎn)和應(yīng)用程序的組件，包括：
除了這些核心的 HTML5 相關(guān)特性，該項(xiàng)目還實(shí)現(xiàn)了幾個優(yōu)秀的最佳實(shí)踐。下面列出了部分最佳實(shí)踐：
盡管看起來已經(jīng)不少了，但上面的列表只是這個項(xiàng)目附帶的最佳實(shí)踐的一個樣本。即使對于持續(xù)關(guān)注這些事情的人來說，這也是一個令人印象深刻的集合。事實(shí)上，這個集合是如此令人印象深刻，以至于該項(xiàng)目承認(rèn)這樣一個事實(shí)：這個集合是 “刪除鍵友好的”。這句話的意思是：它是一個健壯的集合，并不是每個人都需要在每個項(xiàng)目中默認(rèn)包含每個特性。 所有這一切都指向一個使用 HTML5 Boilerplate 的核心教訓(xùn)：由于 HTML5 Boilerplate 意味著被用作一個基礎(chǔ)，因此在項(xiàng)目啟動時啟用這些文件不是可選項(xiàng)，而且是 必須執(zhí)行的操作。認(rèn)識到這一點(diǎn)之后，我們現(xiàn)在可以開始逐步演示一個 HTML5 Boilerplate 項(xiàng)目并使用那個刪除鍵來定制它了。 使用 Boilerplate當(dāng)您閱讀下面的小節(jié)時，請記住，這個逐步演示的目的并不是規(guī)定您應(yīng)該如何設(shè)置您的項(xiàng)目，而是演示您如何能夠和應(yīng)該如何解決這個問題，以便這個基礎(chǔ)平臺適應(yīng)您的特定項(xiàng)目和開發(fā)風(fēng)格。 獲取代碼要獲得代碼，最簡單的方法就是從項(xiàng)目網(wǎng)站下載（見 參考資料）。鑒于本文的目的，我假定您已經(jīng)下載代碼，獲得了 stripped 版本。 或者，如果您喜歡使用
無論您采用哪種方法，都需要移動到您新創(chuàng)建的副本并進(jìn)行定制。 定制通常，我進(jìn)行的首次編輯取決于我計(jì)劃使用高級 HTML5、CSS3 或其他新興技術(shù)的程度。如果您正在創(chuàng)建一個內(nèi)容站點(diǎn)或博客，且只想使用新的語義標(biāo)記對您的站點(diǎn)進(jìn)行 “未來證明（future-proof）”，那么可以使用 我經(jīng)常自動刪除的一個部分是位于底部的配置部分。如果不用它，最好立即刪除。根據(jù)您的當(dāng)前項(xiàng)目的需求，您也可以刪除用于 Internet Explorer 6 的 PNGFix 解決方案。 在 HTML 文檔外部，您可以立即刪除項(xiàng)目根目錄中的一些文件和文件夾，原因是您不需要它們（test 文件夾、web.config、crossdomain.xml 和 nginx.conf），或者擁有自己的版本（robots.txt 和 .htaccess）。 一個額外的注意事項(xiàng)如果您在一臺運(yùn)行 Windows 的機(jī)器上使用文件 protocol 開發(fā)模板并在 Internet Explorer 中測試它們，那么您肯定熟悉那些無窮無盡的安全對話框，只要您試圖運(yùn)行任何內(nèi)容 — 即使以遠(yuǎn)程交互式方式運(yùn)行 — 那些對話框就會彈出來。要消除這個現(xiàn)象，只需將 “Mark of the Web” 直接插入 doctype 聲明之后。這個簡單的代碼段將把 Internet Explorer 放入 Internet 區(qū)，并抑制令人討厭的安全對話框。 <!doctype html> <!-- saved from url=(0014)about:internet --> 注意，這段代碼也被項(xiàng)目的構(gòu)建腳本剝離出去，因此它不會進(jìn)入生產(chǎn)環(huán)境。 文件夾結(jié)構(gòu)這不是一個典型定制，但它真的展示了這樣一個事實(shí)：HTML5 Boilerplate 是一個基礎(chǔ) — 僅此而已。如果您不喜歡某個內(nèi)容，盡管修改它。您才是那個推動項(xiàng)目前進(jìn)的人。 每當(dāng)我開始一個項(xiàng)目時，我都首先調(diào)整文件夾結(jié)構(gòu)?，F(xiàn)有結(jié)構(gòu)沒有任何錯誤：我只是喜歡將所有靜態(tài)資產(chǎn)（腳本、flash 元素、圖像、樣式表）放置到一個名為 _assets 的頂級目錄中。這樣做將保持一個更整潔的根目錄，將那些經(jīng)常被引用的元素推到文件窗口中的目錄樹的頂端。除此之外，我還在 CSS 文件夾中添加兩個子目錄，分別用于 Web 字體和 CSS 圖像。由于以前處理過許多將圖像用作內(nèi)容的站點(diǎn)，我喜歡將內(nèi)容圖像和界面圖像分離開來，這就需要新建兩個文件夾。 我還要簡化 js 文件夾的層級結(jié)構(gòu)，方法是刪除 libs、mylibs 和 profiling 目錄，將它們的內(nèi)容移動到一個扁平的 js 目錄中。完成后的結(jié)果如 圖 1 所示。 圖 1. 新文件夾結(jié)構(gòu) 此時，我只是確保 HTML 文檔中的路徑匹配新現(xiàn)實(shí)，我自己進(jìn)行了一些調(diào)整。我還對構(gòu)建腳本進(jìn)行了一些調(diào)整，這將在下一節(jié)中介紹，但總的來說，我準(zhǔn)備好開始我的新項(xiàng)目了。 構(gòu)建腳本當(dāng)您準(zhǔn)備好打包您的站點(diǎn)時 — 要么作為一個靜態(tài)站點(diǎn)交付，要么作為一個將來用于與一個 CMS 或其他平臺集成的構(gòu)建工具，是時候訪問 /build 目錄了。就目前而言，HTML5 Boilerplate 擁有一個 ANT 構(gòu)建腳本，該腳本包含幾個用于打包內(nèi)容的有用任務(wù)。 注意：如果您想將其他構(gòu)建系統(tǒng)集成到您的項(xiàng)目中并且您是一個 Rake、Apache Maven 或其他構(gòu)建系統(tǒng)大師，那么您可以直接使用 github，分割項(xiàng)目，進(jìn)行構(gòu)建。 構(gòu)建腳本的功能使用 ANT — 一個基于 Java? 的構(gòu)建工具，這個構(gòu)建腳本執(zhí)行以下任務(wù)：
有 4 個任務(wù)您應(yīng)該注意：
如果您正在運(yùn)行默認(rèn) boilerplate，那么只要您安裝了 Java 且您的路徑中有 ANT，上述任務(wù)就應(yīng)該能夠完成。 如果您和我一樣，也對您的文件架結(jié)構(gòu)進(jìn)行了一些調(diào)整，那么您必須對構(gòu)建腳本進(jìn)行一些定制。您將在一個名為 build.properties 的文件中進(jìn)行大部分更改，您可能必須調(diào)整構(gòu)建腳本中的一到兩行。 build.properties 中的更改（如 清單 1 所示）都是基于目錄的。變量被更新為將構(gòu)建腳本指向 JavaScript 代碼、CSS 和圖像的新位置。 清單 1. 示例 build.properties 文件#build properties is where you override default configuration elements.
#in my case I just need to set some new folder references.
# Custom Build options ---------------------------------
# Project structure -----------------------------
# Directory names
dir.assets = _assets
dir.js = ${dir.assets}/js
# Main JS script folder (Will be concatenated and minified)
dir.js.main = ${dir.js}
dir.css = ${dir.assets}/css
dir.images = ${dir.build}/images
dir.cssimages =${dir.css}/images對于我的環(huán)境，我需要修改 build.xml 中的一行來引用我的第二個圖像目錄。清單 2 展示了這個簡單的更改。您將在這里看到操作系統(tǒng)級分支，因此下面的示例使用一個 Windows 環(huán)境。還有針對 Linux? 和 Mac OS X 的分支，那里也需要進(jìn)行類似的更改。 清單 2. 編輯 build.xml<target name="imagesjpg" depends="copy">
<echo message="Clean up those jpgs..."/>
[snip...]
<apply executable="tools/jpegtran.exe" osfamily="windows">
<fileset dir="./${dir.publish}/${dir.images}/" includes="*.jpg"/>
<!-- Adding in my css/images directory -->
<fileset dir="./${dir.publish}/${dir.cssimages}/" includes="*.jpg"/>
[snip...]
</target>進(jìn)行這些更改之后，您就獲得了一個根據(jù)您的喜好進(jìn)行調(diào)整的、功能齊全的項(xiàng)目，您已準(zhǔn)備好構(gòu)建優(yōu)化代碼了。 結(jié)束語如您所見，進(jìn)入 HTML5 Boilerplate 項(xiàng)目的門檻非常低，有充足的空間用于試驗(yàn)。您可以將這個項(xiàng)目作為您的試驗(yàn)項(xiàng)目，探索它帶來的好處，如果其中有任何缺失或您不需要的東西，盡管進(jìn)行相應(yīng)修改。 |
|
|
