【HTML5】使用 HTML5 Boilerplate 開始您的 web 開發

時間 2019-11-07

標籤 HTML5 使用 html5 html boilerplate 開始您的 web 開發欄目 HTML5 简体版

原文原文鏈接

web 開發團隊的一個常見實踐是建立一組標準文件，團隊成員基於它們開始 web 開發流程，包括一個公共文件結構、基本命名慣例和標準庫。這樣作可以更容易啓動並運行一個項目。它還能將開發人員引向內部編碼標準並實施標準文件組織。 HTML5 Boilerplate 就是這種處於 web 開發最前沿的完美理念的實現。css

結合了使用 HTML5 須要的幾個加強和許多其餘最佳實踐，只需最少的前期投資，HTML5 Boilerplate 就能爲您的項目提供一個堅如磐石的基礎。本文簡述了使用 HTML5 Boilerplate 來開始一個項目的方法，展現了一些可以對其進行調優，使其適應一個已有框架和編碼風格的方法。html

HTML5 組件前端

HTML5 Boilerplate 的核心是用於幫助開發 HTML5 站點和應用程序的組件，包括：html5

Modernizr，一個小型實用程序庫，支持在 Windows® Internet Explorer® 中設置新的 HTML5 元素樣式，並協助在全部瀏覽器中進行 HTML5/CSS3 特性檢測。若是您正在使用 HTML5 進行開發且須要支持 Internet Explorer 版本 9 以前的瀏覽器版本，那麼這個庫（或者我稍後將解釋的一個替代選項）將是您的項目必不可少的一個組件。nginx
構建於 HTML5 Doctor Reset 之上的一個 CSS 起始文件，包含幾個智能默認值和加強。git
內置 HTML5 語法，以及一些新的語義元素，用於構成您文檔的骨架。github

除了這些核心的 HTML5 相關特性，該項目還實現了幾個優秀的最佳實踐。下面列出了部分最佳實踐：web

在整個項目過程當中很是關注前端性能，採用適當的結構（CSS 位於頂部，JavaScript 代碼位於底部），一個 Google Analytics 異步實現，以及項目的 Apache ANT 構建腳本中提供的幾個基於性能的加強。shell
幾個跨瀏覽器助手，包括 HTML 元素上的特定於 Internet Explorer 版本的類和一個針對 Internet Explorer 版本 6 的自動 PNG 補丁。windows
樣例 .htaccess 和 web.config 文件，幫助您設置您的服務器來利用 HTML5 特性和 web 字體並經過一個智能緩存策略加速您的站點。
遠遠超出典型重置範圍的 CSS 加強。這個樣式表使用精心挑選和偶爾聰明的默認值重構元素。它還添加了幾個方便的助手類。常見的 .clearfix 類是您須要熟悉的類，.hidden 和.visuallyhidden 等類也包含在內且很是有用。骨架打印樣式（Skeleton print styles）、分頁媒體樣式和用於快速響應 web 設計的媒體查詢也被包含進來。

儘管看起來已經很多了，但上面的列表只是這個項目附帶的最佳實踐的一個樣本。即便對於持續關注這些事情的人來講，這也是一個使人印象深入的集合。事實上，這個集合是如此使人印象深入，以致於該項目認可這樣一個事實：這個集合是「刪除鍵友好的」。這句話的意思是：它是一個健壯的集合，並非每一個人都須要在每一個項目中默認包含每一個特性。

全部這一切都指向一個使用 HTML5 Boilerplate 的核心教訓：因爲 HTML5 Boilerplate 意味着被用做一個基礎，所以在項目啓動時啓用這些文件不是可選項，並且是 必須執行的操做。認識到這一點以後，咱們如今能夠開始逐步演示一個 HTML5 Boilerplate 項目並使用那個刪除鍵來定製它了。

回頁首

使用 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

不管您採用哪一種方法，都須要移動到您新建立的副本並進行定製。

回頁首

定製

一般，我進行的首次編輯取決於我計劃使用高級 HTML五、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 項目的門檻很是低，有充足的空間用於試驗。您能夠將這個項目做爲您的試驗項目，探索它帶來的好處，若是其中有任何缺失或您不須要的東西，儘管進行相應修改。