Can’t make the #ChromeDevSummit this year? Catch all the content (and more!) on the livestream, or join your peers for a CDS Extended event at a hosted location nearby. To learn more, check out the Chrome Dev Summit 2019 website.

Web Starter Kit

下載 Web Starter Kit(測試版)

什麼是 Web Starter Kit?

Web Starter Kit 是用於 Web 開發的樣板文件。在多臺設備上構建卓越體驗並且以性能爲導向的工具。幫助您遵循 Google 的網頁基礎知識中介紹的最佳做法,以便保持工作效率。爲行業的專業人士和新來者提供一個堅實的起點。

功能

功能 摘要
自適應樣板文本 針對跨屏網頁優化的自適應樣板文本。由 Material Design Lite 提供技術支持。您可以使用這個工具或者 basic.html 從頭開始。
Sass 支持 輕鬆將 Sass 彙編到 CSS 中,可以支持變量、混合類以及更多。(生產時運行 gulp servegulp
性能優化 縮小並連接 JavaScript、CSS、HTML 和圖像來幫您精簡頁面。(運行 gulp 以便向 /dist 中創建經過優化的項目版本)
代碼錯誤分析 JavaScript 代碼錯誤分析是通過 ESLint(用於識別和報告 JavaScript 中的模式的可插拔代碼分析工具)完成的。Web Starter Kit 使用的 ESLint 具有 eslint-config-google,視圖遵循 Google JavaScript 風格指南。
通過 Babel 6.0 支持 ES2015 可選的 ES2015 支持(使用 Babel)。爲了啓用 ES2015 支持,請刪除 (https://github.com/google/web-starter-kit/blob/master/.babelrc) 文件中的 "only": "gulpfile.babel.js", 這一行。ES2015 源代碼將自動轉譯爲 ES5,以提供廣泛的瀏覽器支持。
內置的 HTTP 服務器 內置的服務器可在您開發和迭代時在本地預覽網站
實時瀏覽器重新加載 在進行任何編輯後實時重新加載瀏覽器,無需擴展程序。(運行 gulp serve 並編輯您的文件)
跨設備同步 當您編輯項目時在多臺設備上同步點擊、滾動、形成和實時重新加載。由 BrowserSync 提供技術支持。(運行 gulp serve 並打開網絡中其他設備上提供的 IP)
離線支持 由於我們已經完成了服務工作線程預先緩存,將 dist 部署到 HTTPS 域中的網站可以獲得離線支持。這一步可以通過 sw-precache 實現。
PageSpeed Insights 顯示您的網站在移動設備和臺式機上運行性能的網頁性能指標(運行 gulp pagespeed

快速入門

下載工具包或者克隆這個存儲區並根據 app 目錄中包含的內容進行構建。

您有兩個 HTML 起點可以選擇:

  • index.html - 默認起點,包含 Material Design 佈局。
  • basic.html - 無佈局,但仍包含我們最低限度的移動最佳做法

請務必參閱安裝文檔,驗證您的環境是否已準備好運行 WSK。驗證您的系統可以運行 WSK 後,請檢查可用的命令以便開始使用。

網頁性能

Web Starter Kit 努力爲您提供開箱即用的高性能起點。我們的默認模板的中值網頁測試得分速度指數 爲 ~1100(1000 爲理想值),重複訪問速度指數爲 ~550,這一切都得益於服務工作線程預先緩存。

瀏覽器支持

目前,我們致力於爲以下瀏覽器的兩個最新版本提供官方支持:

  • Chrome
  • Edge
  • Firefox
  • Safari
  • Opera
  • Internet Explorer 9+

這並不是說 Web Starter Kit 不能在比上述版本舊的瀏覽器中使用,僅僅表示我們關注的重點是確保上述瀏覽器中的佈局卓越。

故障排除

如果您在安裝或運行這些工具時遇到問題,請查看我們的問題排查指南,然後提出問題。我們非常樂意與您討論問題的解決辦法。

僅限樣板文本選項

如果您不願意使用我們的任何工具,請從項目中刪除以下文件:package.jsongulpfile.babel.js.jshintrc.travis.yml。您現在可以安全地選擇使用具有備用構建系統或不具備任何構建系統的樣板文本了。

文檔和訣竅

靈感

Web Starter Kit 的靈感來源於移動設備 HTML5 樣板文件以及 Yeoman 的 generator-gulp-webapp,並且在開發的過程中採用了這兩個項目的貢獻者的意見。我們的常見問題解答試圖回答有關項目的常見問題。

瞭解詳情

如需瞭解詳細信息、查看代碼,提交問題或參與其中,請查看我們在 https://github.com/google/web-starter-kit 上提供的 Git 存儲區