編譯 ES6 JSX 語法 | HTML 自動載入 CSS JS | 本地端伺服器 本文目的為介紹以 Gulp 打造 React Redux Router ES6 的開發及產品環境，以下將會說明所需的套件及設定方式，依建制步驟拆成五個篇章，關於 React Redux ES6 等相關知識不在此篇筆記介紹範圍。 第一篇 - 編譯 ES6 JSX 語法 | CSS JS 自動載入 | 本地端伺服器 編譯 JSX 及 ES6 語法 | Babel Browserify HTML 自動載入 CSS JS | Bower Wiredep Gulp Inject 建立開發用伺服器及自動重新載入 | Gulp Connect 第二篇 - 編譯 SASS | 語法偵錯 | 單元測試 編譯 SASS 語法 | Gulp Sass JavaScript 語法偵錯 | ESLint 單元測試 | Jest 第三篇 - 環境變數 | 程式碼壓縮 | 檔案壓縮 | 輸出隨機檔名 轉換開發及產品環境變數 | Browerify Dotenv Envify JavaScript SASS 程式碼壓縮 | Gulp Sass Uglify 產品環境下打包所有 JS CSS 檔案 | Gulp Useref 輸出的 CSS JS 檔案附加不重複的檔名 | Gulp Rev 第四篇 - 彙整 Gulp task 彙整 Gulp task - development 彙整 Gulp task - production 第五篇 - 導入 Redux React-Router 架構 導入 Redux Router 架構 | React Redux Router 前三篇會依序介紹每個功能及建置方式，第四篇會將零碎的 task 打包成一連串的動作，做成開發及產品環境的指令集，第五篇會把 react-redux 和 react-router 基本架構導入。 基本需求：已安裝 NodeJS 及了解如何使用 npm ，並知道如何使用 Gu