Foundation - 入門專案

您可以使用一些可用的模板開始您的專案開發，這些模板可以透過 Yeti Launch 或 Foundation CLI 安裝。您可以使用這些模板透過使用 Gulp 構建系統來處理 Sass、JavaScript、複製檔案等來開始新的專案。

基本模板

基本模板類似於 Sass 模板，它包括扁平的目錄結構，並且只編譯 Sass 檔案，在只使用 Sass 時擁有這個簡單的模板是很好的。您可以使用 Yeti Launch 或使用 Foundation CLI 使用以下命令來使用基本模板：

$ foundation new --framework sites --template basic

要設定此項，首先執行 npm install、bower install 並使用 npm start 命令執行它。您也可以從 Github 下載模板檔案。

ZURB 模板

它結合了 CSS/SCSS、JavaScript、Handlebars 模板、標記結構、影像壓縮，並使用 Sass 處理。您可以使用 Yeti Launch 或使用 Foundation CLI 使用以下命令來使用 ZURB 模板：

$ foundation new --framework sites --template zurb

要執行此模板，請按照基本模板中指定的相同步驟操作。您也可以從 Github 下載模板檔案。

資源複製

您可以使用 Gulp 複製 src/assets 資料夾中的內容，其中 assets 將是您的專案資料夾。這裡重要的一點是，Sass 檔案、JavaScript 檔案和影像不會包含在此資源複製過程中，因為它們將有自己的內容複製流程。

頁面編譯

您可以在位於 src/ 目錄中的三個資料夾（即 pages、layouts 和 partials）下建立 HTML 頁面。您可以使用 Panini 平面檔案編譯器，該編譯器使用模板、頁面、HTML 部分為頁面建立佈局。此過程可以使用 Handlebars 模板語言完成。

Sass 編譯

您可以使用 Libsass 將 Sass 編譯為 CSS，主 Sass 檔案將儲存在 src/assets/scss/app.scss 下，新建立的 Sass 部分也將儲存在此資料夾中。CSS 的輸出將類似於正常的 CSS，採用巢狀樣式。您可以使用 clean-css 壓縮 CSS，並使用 UnCSS 從樣式表中刪除未使用的 CSS。

JavaScript 編譯

JavaScript 檔案將儲存在 src/assets/js 資料夾中，Foundation 的所有依賴項都捆綁到 app.js 檔案中。檔案將按照以下順序捆綁在一起：

• Foundation 的依賴項。
• 檔案將儲存在 src/assets/js 資料夾中。
• 這些檔案捆綁成一個名為 app.js 的檔案。

影像壓縮

預設情況下，所有影像都將儲存在 dist 資料夾下的 assets/img 資料夾中。您可以使用 gulp-imagemin 在構建用於生產時壓縮影像，它支援 JPEG、PNG、SVG 和 GIF 檔案。

BrowserSync

您可以建立一個 BrowserSync 伺服器，該伺服器在 https://:8000 提供同步瀏覽器測試，並能夠使用此 URL 檢視已編譯的模板。當您的伺服器執行時，儲存檔案時頁面會自動重新整理，您可以在工作時即時看到對頁面的更改。