web 開發團隊的一個常見實踐是創建一組標准文件，團隊成員基於它們開始 web 開發流程，包括一個公共文件結構、基本命名慣例和標准庫。這樣做能夠更容易啟動並運行一個項目。它還能將開發人員引向內部編碼標准並實施標准文件組織。 HTML5 Boilerplate 就是這種處於 web 開發最前沿的完美理念的實現。
結合了使用 HTML5 需要的幾個增強和許多其他最佳實踐，只需最少的前期投資，HTML5 Boilerplate 就能為您的項目提供一個堅如磐石的基礎。本文簡述了使用 HTML5 Boilerplate 來開始一個項目的方法，展示了一些能夠對其進行調優，使其適應一個已有框架和編碼風格的方法。
HTML5 Boilerplate 的核心是用於幫助開發 HTML5 站點和應用程序的組件，包括：
Modernizr，一個小型實用程序庫，支持在 Windows® Internet Explorer® 中設置新的 HTML5 元素樣式，並協助在所有瀏覽器中進行 HTML5/CSS3 特性檢測。如果您正在使用 HTML5 進行開發且需要支持 Internet Explorer 版本 9 之前的瀏覽器版本 ，那么這個庫（或者我稍后將解釋的一個替代選項）將是您的項目必不可少的一個組件。- 構建於 HTML5 Doctor Reset 之上的一個 CSS 起始文件，包含幾個智能默認值和增強。
- 內置 HTML5 語法，以及一些新的語義元素，用於構成您文檔的骨架。
除了這些核心的 HTML5 相關特性，該項目還實現了幾個優秀的最佳實踐。下面列出了部分最佳實踐：
- 在整個項目過程中非常關注前端性能，采用適當的結構（CSS 位於頂部，JavaScript 代碼位於底部），一個 Google Analytics 異步實現，以及項目的 Apache ANT 構建腳本中提供的幾個基於性能的增強。
- 幾個跨瀏覽器助手，包括 HTML 元素上的特定於 Internet Explorer 版本的類和一個針對 Internet Explorer 版本 6 的自動 PNG 補丁。
- 樣例 .htaccess 和 web.config 文件，幫助您設置您的服務器來利用 HTML5 特性和 web 字體並通過一個智能緩存策略加速您的站點。
- 遠遠超出典型重置范圍的 CSS 增強。這個樣式表使用精心挑選和偶爾聰明的默認值重構元素。它還添加了幾個方便的助手類。常見的
.clearfix類是您需要熟悉的類，.hidden和.visuallyhidden等類也包含在內且非常有用。骨架打印樣式（Skeleton print styles）、分頁媒體樣式和用於快速響應 web 設計的媒體查詢也被包含進來。
盡管看起來已經不少了，但上面的列表只是這個項目附帶的最佳實踐的一個樣本。即使對於持續關注這些事情的人來說，這也是一個令人印象深刻的集 合。事實上，這個集合是如此令人印象深刻，以至於該項目承認這樣一個事實：這個集合是 “刪除鍵友好的”。這句話的意思是：它是一個健壯的集合，並不是每個人都需要在每個項目中默認包含每個特性。
所有這一切都指向一個使用 HTML5 Boilerplate 的核心教訓：由於 HTML5 Boilerplate 意味着被用作一個基礎，因此在項目啟動時啟用這些文件不是可選項，而且是 必須執行的操作。認識到這一點之后，我們現在可以開始逐步演示一個 HTML5 Boilerplate 項目並使用那個刪除鍵來定制它了。
當您閱讀下面的小節時，請記住，這個逐步演示的目的並不是規定您應該如何設置您的項目，而是演示您如何能夠和應該如何解決這個問題，以便這個基礎平台適應您的特定項目和開發風格。
要獲得代碼，最簡單的方法就是從項目網站下載（見 參考資料）。鑒於本文的目的，我假定您已經下載代碼，獲得了 stripped 版本。
或者，如果您喜歡使用 git，則可以克隆這個項目，然后使用下面任一方法獲取一個干凈的項目副本來使用：
- 如果您能夠訪問一個 UNIX® shell，那么可以導航到項目的構建目錄並運行其中的 createproject.sh 文件，這將在 HTML5 Boilerplate 根文件夾中生成一個干凈的目錄。
- 如果您處於一台 Windows 機器上，或者在放置輸出文件方面想要更多靈活性，因而不能運行 shell 腳本，那么您可以檢查 stripped 的分支，然后下載一個存檔文件。通常，您使用 Smart Git 或 TortoiseGit 這樣的工具來執行這個操作，但也可以從命令行執行，如下所示：
git checkout -b stripped origin/stripped git archive stripped --format=zip --output=/path/to/your/files.zip
無論您采用哪種方法，都需要移動到您新創建的副本並進行定制。
通常，我進行的首次編輯取決於我計划使用高級 HTML5、CSS3 或其他新興技術的程度。如果您正在創建一個內容站點或博客，且只想使用新的語義標記對您的站點進行 “未來證明（future-proof）”，那么可以使用 html5shiv 這個小代碼段替換外部 Modernizr 腳本。html5shiv 代碼的用途是使 CSS 在 Internet Explorer 的較早版本中用於新的語義元素。Modernizr 比較快，但如果您不打算利用測試 Modernizr 發布，那么可以通過選擇簡化選項來為您的用戶節約幾毫秒時間。
我經常自動刪除的一個部分是位於底部的配置部分。如果不用它，最好立即刪除。根據您的當前項目的需求，您也可以刪除用於 Internet Explorer 6 的 PNGFix 解決方案。
在 HTML 文檔外部，您可以立即刪除項目根目錄中的一些文件和文件夾，原因是您不需要它們（test 文件夾、web.config、crossdomain.xml 和 nginx.conf），或者擁有自己的版本（robots.txt 和 .htaccess）。
如果您在一台運行 Windows 的機器上使用文件 protocol 開發模板並在 Internet Explorer 中測試它們，那么您肯定熟悉那些無窮無盡的安全對話框，只要您試圖運行任何內容 — 即使以遠程交互式方式運行 — 那些對話框就會彈出來。要消除這個現象，只需將 “Mark of the Web” 直接插入 doctype 聲明之后。這個簡單的代碼段將把 Internet Explorer 放入 Internet 區，並抑制令人討厭的安全對話框。
<!doctype html> <!-- saved from url=(0014)about:internet --> |
注意，這段代碼也被項目的構建腳本剝離出去，因此它不會進入生產環境。
這不是一個典型定制，但它真的展示了這樣一個事實：HTML5 Boilerplate 是一個基礎 — 僅此而已。如果您不喜歡某個內容，盡管修改它。您才是那個推動項目前進的人。
每當我開始一個項目時，我都首先調整文件夾結構。現有結構沒有任何錯誤：我只是喜歡將所有靜態資產（腳本、flash 元素、圖像、樣式表）放置到一個名為 _assets 的頂級目錄中。這樣做將保持一個更整潔的根目錄，將那些經常被引用的元素推到文件窗口中的目錄樹的頂端。除此之外，我還在 CSS 文件夾中添加兩個子目錄，分別用於 Web 字體和 CSS 圖像。由於以前處理過許多將圖像用作內容的站點，我喜歡將內容圖像和界面圖像分離開來，這就需要新建兩個文件夾。
我還要簡化 js 文件夾的層級結構，方法是刪除 libs、mylibs 和 profiling 目錄，將它們的內容移動到一個扁平的 js 目錄中。完成后的結果如 圖 1 所示。
圖 1. 新文件夾結構
此時，我只是確保 HTML 文檔中的路徑匹配新現實，我自己進行了一些調整。我還對構建腳本進行了一些調整，這將在下一節中介紹，但總的來說，我准備好開始我的新項目了。
當您准備好打包您的站點時 — 要么作為一個靜態站點交付，要么作為一個將來用於與一個 CMS 或其他平台集成的構建工具，是時候訪問 /build 目錄了。就目前而言，HTML5 Boilerplate 擁有一個 ANT 構建腳本，該腳本包含幾個用於打包內容的有用任務。
注意：如果您想將其他構建系統集成到您的項目中並且您是一個 Rake、Apache Maven 或其他構建系統大師，那么您可以直接使用 github，分割項目，進行構建。
使用 ANT — 一個基於 Java™ 的構建工具，這個構建腳本執行以下任務：
- 使用 YUI 壓縮程序合並和縮小 JavaScript
- 合並和縮小 CSS
- 使用
jpegtran和optipng優化 JPG 和 PNG 文件 - 移除僅用於開發的代碼
- 使用
htmlcompressor配置 HTML 縮小 - 修改文件名進行智能緩存（特別是緩存已更新的文件）
有 4 個任務您應該注意：
build。 執行細小的 HTML 優化，縮小內聯腳本和樣式，連接和縮小外部 JavaScript 代碼和 CSS，處理圖像buildkit。 保留 HTML 空白以在今后的生產流程中保持可讀性，縮小內聯腳本和樣式，連接和縮小外部 JavaScript 代碼和 CSS，處理圖像minify。 執行完整的 HTML 縮小，縮小內聯腳本和樣式，連接和縮小外部 JavaScript 代碼和 CSS，處理圖像text。 執行完整的 HTML 縮小，JavaScript 代碼縮小，連接和 CSS 縮小，不執行圖像優化
如果您正在運行默認 boilerplate，那么只要您安裝了 Java 且您的路徑中有 ANT，上述任務就應該能夠完成。
如果您和我一樣，也對您的文件架結構進行了一些調整，那么您必須對構建腳本進行一些定制。您將在一個名為 build.properties 的文件中進行大部分更改，您可能必須調整構建腳本中的一到兩行。
build.properties 中的更改（如 清單 1 所示）都是基於目錄的。變量被更新為將構建腳本指向 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 |
對於我的環境，我需要修改 build.xml 中的一行來引用我的第二個圖像目錄。清單 2 展示了這個簡單的更改。您將在這里看到操作系統級分支，因此下面的示例使用一個 Windows 環境。還有針對 Linux® 和 Mac OS X 的分支，那里也需要進行類似的更改。
清單 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> |
進行這些更改之后，您就獲得了一個根據您的喜好進行調整的、功能齊全的項目，您已准備好構建優化代碼了。
如您所見，進入 HTML5 Boilerplate 項目的門檻非常低，有充足的空間用於試驗。您可以將這個項目作為您的試驗項目，探索它帶來的好處，如果其中有任何缺失或您不需要的東西，盡管進行相應修改。