使用 gulp 進行網頁前端自動化

• 介紹

• Windows 與 Mac 安裝說明

• Gulp 環境 (Windows 安裝 Nodejs 篇)

• Gulp 環境 (Mac 安裝 Nodejs 篇)

• Nodejs 與他的環境

• 有沒有加入 -g 差異在哪裡呢？

• Gulp 自動化原理

• 開始前的說明

• Gulp 4.0 課程更新說明

• 課程使用的套件與相關連結

• 加入 Jade Template Language

• Jade src 路徑修改說明

• Node Sass 高速編譯你的 SCSS

• PostCSS 更高明的 CSS 優化流程

• AutoPrefixer 更新說明

• 關於 Watch 的監控

• load plugins 簡化 gulp 載入流程

• Babel ES6 編譯 (上)

• Babel ES6 編譯 (下 - Source Map 的運用)

• Babel 套件補充說明

• Bower 簡介

• Gulp 與 Bower 流程串接

• Gulp 與 Bower 程式碼串接

• Bower 額外補充說明

• 建立 網頁開發不可或缺的 Webservice

• 壓縮優化你的程式碼

• gulp minify CSS 與 Webservice 補充說明

• 依據開發環境調整你的輸出內容

• 釋出你的開發成品

• 圖片壓縮技巧

• Gulp 與 Git

• 一鍵部屬到 Github Pages

• npm install 中的 --save 與 --save-dev 之差異

• Template Language 可以做什麼

• 透過簡單的語法，快速入門 Jade

• 透過工具來快速轉換 Jade 語法

• 製作你的 HTML 樣板

• Jade 匯入外部 JSON 資料內容

• 使用 Each 處理資料並產生選單

• 使用 Each 處理大量資料

• 使用 Mixin 來製作 HTML 模組

• 章節簡介

• 使用 includePaths 載入外部 Sass 資源

• 合併來自於 NPM 的 JavaScript 資源

• 如何升級成 Gulp 4.0

• 確認任務完成的方法

• 直接將 watch, browserSync 加入任務函式中

• Gulp 4.0 的模組化手法