Web Starter Kit: 環境與開始動手

本文介紹 Web Starter Kit 的入門第一步：簡單認識開發環境，並開始修改第一個 Web App。首先，必須根據 Web Starter Kit 官方網站上的說明，安裝 Web Starter Kit 所需的開發環境。

從架構面來看，Web Starter Kit 提供二個環境：

• Node.js 的 Runtime
• 一套 Web App 的 HTML5 文件（ Mobile-optimized HTML 模板與 CSS 定義）

Web Starter Kit 並非像是 Android SDK 提供完整的 IDE 環境，所以使用 Web Starter Kit 前，仍有一些背景知識與工具要事前準備好。第一個必備工具，當然就是 Editor 了。撰寫程式碼，包含 HTML5 與 CSS，最佳首選當然就是 Sublime Text 3。Web Starter Kit 官方也推薦這個編輯器；這個編輯器是工程師的基本裝備。

Web Starter Kit 內容比較單純：就只有 Node.js 的 Runtime，以及一套 HTML5 文件模板。不過，它確實簡化許多繁鎖的技術細節。例如，現在的 Node.js 開發者，每個人都有不同的環境，有些人用 Grunt，有些人用 Gulp；同樣是使用 Grunt 環境，每個人撰寫的 Tasks 又不一樣。

使用 HTML5 來開發 Web App，大家的 Page Structure 又不同，每個人還會有自已的 CSS 定義；如果是 RWD 的話，Media Query 的寫法又不一致（對螢幕寬度的定義標準不一）。如果現在大家都直接引用 Web Starter Kit，這一切都可以成為標準。所以，Web Starter Kit 或許有機會把 Multi-Device HTML5 App 的開發與 User Experience 標準化。

Step 1: 編譯

下載並完成 Web Starter Kit 的環境安裝後，直接在 web-starter-kit-0.2.0-beta/ 目錄下執行 gulp 指令，編譯 app/ 下的內容。編譯後的結果，會存放至 dist/ 目錄下。

Step 2: 執行

編譯後，再執行 gulp serve 指令，啟動 Node.js 的 Web Server。Web Starter Kit 的 gulp 環境支援 Live Reload；這時，gulp 會自動開啟瀏覽器，並且自動瀏覽我們的 Web App。

Step 3: 體驗 Live Reload

開啟 app/ 目錄下的 index.html 文件，這就是在上個步驟所看到的網頁。你會發現，index.html 已經將 ViewPort、Page Structure 等各種技術細節，都事先定義完成了。我們的第一個 Web App 就從這裡開始。

首先，可以找到 <header> 區塊，接著將裡頭的 <h1> 文字修改為「InnoBoard」：

        <header class="app-bar promote-layer">
            <div class="app-bar-container">
                <button class="menu"><img src="images/hamburger.svg"></button>
                <h1 class="logo">InnoBoard</h1>
                <section class="app-bar-actions">
                <!-- Put App Bar Buttons Here -->
                </section>
            </div>
        </header>

存檔的同時，會發現 gulp 幫我們重新「整理網頁」了，而且重速相當快。這個功能就叫做 Live Reload。