The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

如何在 Windows 平台安裝與使用 Yeoman 1.0 相關工具

前陣子翻譯了一篇各式 Web 前端開發工具整理的文章,裡面介紹了許多好用的前端工具,其中 Yeoman 就是一個前端工具的組合,幫你統整前端網頁的開發流程 (Workflow),這是一種工作流程的改善,讓你減少重複的手工作業,也讓你更專注在網站的架構與設計上。不過,這些好用的工具大多透過指令的方式運作 (例如: 透過命令提示字元操作),雖然大多工具是跨平台的,但網路上找到的相關教學文章,都是以 Mac 電腦上的操作為主,因為 Mac 為 Unix-like 的作業系統,可以輕易開啟 Shell 環境,使用上相對順利許多,但到了 Windows 總是卡卡的,有時候甚至於還要 Visual Studio 才能安裝 (因為要編譯特定原始碼),今天我就特別寫一篇在 Windows 安裝與使用 Yeoman 的參考指南,幫助大家快速上手這些好用工具。

我們以 Yeoman 1.0 RELEASE CANDIDATE 1 這個版本為主,網路上許多關於 Yeoman 的文章都是 Beta 版之前的,安裝步驟與使用方法已經差異很大,如果該文章又沒有特別標示 Yeoman 版本的話,那麼跟著操作的挫折感可能會更大,這一版 RC1 已經接近最終釋出的版本,所以版本與 API 的穩定性應該會高出許多。

Yeoman 1.0 包含以下三套工具,分別說明如下:

  • yo - the scaffolding tool from Yeoman ( 用來自動產生網站骨架程式碼的工具 )
  • bower - the package management tool ( 用來管理特定網站下所使用的各式前端套件,如: jQuery )
  • grunt - the build tool ( 用來執行一些網站的自動化工作,例如單元測試、最小化、執行批次命令 )

要安裝這三套工具之前,還有許多相依的工具必須事先安裝,否則工具指令會無法正確執行,以下包括 node.js , Git for WindowsRubyInstaller 這三套工具的安裝注意事項:

※ 安裝 node.js for Windows

請選擇正確的 Windows 安裝檔,注意 CPU 架構有區分 32-bit 與 64-bit 兩種:

 

安裝時要確保 Add to PATH 項目有被安裝進去:

 

※ 安裝 Git for Windows 指令列工具

安裝到 Adjusting your PATH environment 步驟時,選擇 Run Git from the Windows Command Prompt 的相容性比較高,問題也會少很多:

其他就保留預設值即可安裝完成。

 

※ 安裝 Ruby 執行環境

由於前端開發作業經常會用到 Compass 工具撰寫 CSS,而且在使用 Yeoman 的時候,有些產生器所產生的 grunt 定義檔也會用到 Compass 來執行,所以我通常會預先安裝好,以免「書到用時方恨少」( 請把換成工具) 等憾事發生!^_^

不過,安裝 Compass 工具會需要先安裝 Ruby 才能安裝與使用。建議透過 RubyInstaller (Windows) 提供的 MSI 安裝檔進行安裝,但安裝的過程中有一個步驟非常重要,你必須在 Installation Destination and Optional Tasks 步驟時,勾選 Add Ruby executables to your PATH 選項才行,如下圖示:

 

安裝好這些工具之後,就可以開始準備安裝 Yeoman 相關工具了:

1. 開啟 Windows Powershell命令提示字元 (Command Prompt),以下會以 命令提示字元 為例。

2. 透過 node.jsnpm 套件管理員 ( Node Packaged Modules ) 安裝 yo , bowergrunt 工具

npm install -g yo grunt-cli bower

  其中 -g 代表要把 yo , grunt-cli , bower 這三個套件安裝到全域 (global)

 

3. 安裝 yo 相關的 程式碼產生器 (generator) 套件

因為 yo 這套工具主要就是用來自動產生網站骨架程式碼,在執行 yo 之前,你必須預先安裝好這些程式碼產生器範本,這些被稱為 YEOMAN GENERATORS,你可以在 YEOMAN GENERATORS 找到許多現成的產生器範本,並且一樣透過 npm 進行安裝。

例如你在 YEOMAN GENERATORS 頁面找到一個 webapp 產生器,那麼你可以用以下指令進行安裝:

npm install -g generator-webapp

如果想安裝 angular 產生器,那麼你可以用以下指令進行安裝:

npm install -g generator-angular

以此類推!

4. 如果你要順道安裝 Compass 的話,也可以輸入以下指令進行安裝

gem update --system
gem install compass

Yeoman 與 Compass 安裝完成!

 

以下就來示範 Yeoman 的使用過程,用以解釋 Yeoman 的使用情境,以及如何改善開發流程。我們將利用 yeoman 建立一個全新的網站,以下是操作的步驟:

1. 先建立一個網站工作目錄 ( 或透過 SVN / Git 建立一個工作目錄 ),這是一個完全空白的資料夾:

  

 

2. 使用 yo 指令產生網站骨架,我們使用 webapp 這個 產生器 (generator) 來建立網站,指令如下:

yo webapp

此時你會發現,執行 yo 的時候,是一個互動的過程,他會問你幾個問題,然後在最後幫你建立好網站:

當我們把所有問題回答完畢後,yo 會在最後開始完成所有的安裝工作,不過,安裝的過程工,很有可能會看到錯誤訊息。如下圖所示,你第一次執行可能會看到以下錯誤訊息,我將重點文字標示為藍色

Error webapp

You don't seem to have a generator with the name mocha:app installed.
You can see available generators with npm search yeoman-generator and then install them with npm install [name].
To see the 18 registered generators run yo with the `--help` option.

上述錯誤訊息表示,在執行 webapp 產生器的時候,由於會需要用到 mocha:app 這個產生器,這裡看到的冒號 ( : ) 代表的是 子產生器 (sub-generator) 的意思,也就是他會執行 mocha 產生器裡面的 app 子產生器,所以我們必須另外安裝 mocha 這個產生器才能讓 webapp 產生器被正確執行。

安裝 mocha 產生器的方法,在本文稍早已有提過,直接執行以下指令即可:

npm install -g generator-mocha
   

這時我們再執行一次 yo webapp 命令,就不會再有錯誤訊息發生,而且網站骨架會被完整的建立起來。

一個簡單的指令,實際上卻幫我們做了很多事情,我們從產生後的資料夾結構與幾個重要的檔案來說明:

image

  1. 預設網站根目錄會放在 app 資料夾下 (不用問為什麼,因為大家都習慣把網站放在 app 目錄下)
  2. app 資料夾下會有個 bower_components 資料夾,用來放置透過 bower 安裝的前端套件。
  3. node_modules 資料夾則是 node.js 所需的相關套件,是透過 yo 安裝時順便裝上去的。
  4. 根目錄的 Gruntfile.js 是安裝 webapp 時預設產生的 grunt 定義檔,是預先定義好的工作 (Tasks)
  5. bower.jsonbower 專用的套件定義檔,裡面定義了目前已經安裝好的 bower 套件名稱與版本 ( 請不要手動編輯這個檔案 )
  6. package.json 是 node.js 專用的套件定義檔,裡面定義了目前已經安裝好的 node.js 套件名稱與版本 ( 請不要手動編輯這個檔案 )

其他當然還有許多以小數點開頭的檔案,都有特殊的用途,之後如果有機會會再做分享。

 

3. 使用 bower 指令安裝或移除特定前端套件

例如我們想在這個網站額外安裝 jQuery UI 套件,此時你可能不知道 jQuery UI 的 bower 套件名稱為何,那麼你就可以用 bower search [關鍵字]  搜尋,例如:

bower search jquery-ui
   

然後你就可以用 bower install 指令進行安裝,如下範例:

bower install jquery-ui

��執行的過程 (如下圖),你也會看到,執行 bower install 指令的過程,也是互動式的,這裡他讓你選擇 jquery-ui 與 jquery 相依性,如果你選擇新版的 jquery 的話,bower 就會幫你安裝到最新版的 jquery-ui,如果你選擇舊版的 ( jquery 1.9.1 ),那麼 bower 也會安裝相對應適合的 jquery-ui 版本:

bower 套件安裝的過程可以有助於你管理日益增多的各式前端套件,跟著 Yeoman 的流程走,的確可以減少許多網站建置的開發時間,尤其是這類套件之間擁有相依姓與版本更新的問題上。

不過,你可能也會想問,如果是 jQuery UI 的話,我怎麼知道要輸入關鍵字是 jquery-ui 呢?沒錯,你的關鍵字也可以直接打 jquery 來搜尋,只是結果比較多一點而已,如果在 Windows 命令提示字元底下,你還可以透過 findstr 命令幫你過濾掉不必要的結果,例如:

bower search jquery |findstr ui
或者,你也可以用 bower search 指令 (不加其他參數),用以列出所有可安裝的套件清單,我個人習慣是將所有套件存成一個文字檔,然後在記事本或 Notepad2 裡面進行搜尋:
bower search > all_bower_packages.txt

( 註: 截至今日為止,已經有 3,765 個套件在上面,每天都在增加當中… )

若要移除剛剛安裝的 jquery-ui 套件,使用 bower uninstall [套件名稱] 指令即可移除,如下範例:

bower uninstall jquery-ui

 

若要查詢 bower 指令的完整用法,可以直接輸入 bower 指令,即可顯示相關說明:

 

4. 使用 grunt 指令執行自訂工作

由於 grunt 的主要任務就是執行那些預先定義好的工作,也就是那些重複性的、流程複雜的工作,透過預先定義的方式,讓你透過簡單的指令來執行。以我們剛剛透過 webapp 產生器安裝的網站骨架來說,已經內建了許多好用的 grunt 工作,如果想得知到底有哪些工作可用,可以輸入以下指定查詢:

grunt --help

你可以看到 Available tasks 的地方,已經定義好了許多工作:

不過,光是看這些預先定義好的工作名稱,你可能也不知道要執行那些,而且有些工作是有順序性的,若執行的順序顛倒,可能也執行不出甚麼結果。比較好的研究方法,則是開啟 Gruntfile.js 檔案,查看該文件最後面的 grunt.registerTask 定義,例如:

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }
 
    grunt.task.run([
        'clean:server',
        'concurrent:server',
        'autoprefixer',
        'connect:livereload',
        'open',
        'watch'
    ]);
});
 
grunt.registerTask('test', [
    'clean:server',
    'concurrent:test',
    'autoprefixer',
    'connect:test',
    'mocha'
]);
 
grunt.registerTask('build', [
    'clean:dist',
    'useminPrepare',
    'concurrent:dist',
    'autoprefixer',
    'requirejs',
    'concat',
    'cssmin',
    'uglify',
    'copy:dist',
    'rev',
    'usemin'
]);
 
grunt.registerTask('default', [
    'jshint',
    'test',
    'build'
]);

這裡就定義了四個自訂工作,分別是:

  • server
    • 這個工作會包含執行其他多項工作,並且依序執行,如 clean:server, concurrent:server, …
  • test
    • 這裡會執行該網站的相關自動化測試工作,最後一項工作則是執行 mocha 工作
      ( 註: mocha 是一套 JavaScript 測試框架 )。
  • build
    • 用來執行一連串相關工作,主要目的是將網站建置為乾淨且可佈署的檔案,包含 css, js 檔案的最小化動作,並將所有需要部屬的檔案複製到 dist 目錄下。
  • default
    • 用來定義預設的工作,也就是單純執行 grunt 指令時要執行的工作項目。

所以,如果我們想執行 build 工作,直接輸入 grunt build 即可:

grunt build

 

其實你真的很難想像 grunt 可以幫我們做多少事情,只要經過妥善規劃,那些複雜的、沒有效率的、需要重複執行的工作,通通自動化,不但減少錯誤發生,還能提高整體網站開發效率,非常值得前端開發人員花時間研究!

 

總結

從事網頁前端工作的開發人員一定知道,前端技術深似海,要在這些繁雜的技術與工作當中勝出,善用工具絕對是不二法門,千萬別做了幾年之後才開始抱怨「找不到前端工作的價值」、「前端就是一堆 dirty works」或「做前端不如去賣雞排」之類的話,謹記阿謹記! (^_^)

 

相關連結