如何在 macOS 安裝 Laravel 前端開發環境 ?

使用 Laravel Elixir 自動化前端開發

Laravel 雖然為後端 framework，但提供了 Laravel Elixir 整合了很多好用前端工具，其基於 3 個更基本的前端工具 : Node.js、NPM 與 Gulp，這三個必須先搞定後，才能享受 Laravel Elixir 所帶來的便利。

Version

Laravel 5.2.23
Homestead 0.4.2
Node.js 5.7
NPM 3.6
Gulp 3.9.1

版本考量

Node.js 版本更新迅速，裝最新版 Node.js 不見得是好事，因為 :

  1. 我們主要目的是使用 Laravel Elixir，而不是開發 Node.js 應用程式。
  2. Laravel Elixir 整合了很多 Node.js 套件，這些套件或工具的更新速度不見得跟得上最新版的 Node.js 更新速度。

因此 Laravel Elixir 穩定最重要，一味著更新 Node.js，反而會造成 Laravel Elixir 出現未知的問題。

實務上有 2 種使用 Laravel Elixir 方式 :

  1. 直接使用 Homestead : Homestead 已經幫你裝好 Node.js、NPM 與 Gulp，不用擔心版本問題。1 1若想直接在 Homestead 內使用前端工具，詳細請參考如何在 OS X 安裝 Homestead?
  2. 參考 Homestead 的版本 : 參考 Homestead 的 Node.js、NPM 與 Gulp 版本，將相同的版本安裝在 OS X。

本文參考的是 Homestead 0.4.2，其版本為 :

  1. Node.js 5.7
  2. NPM 3.6
  3. Gulp 3.9.1

安裝 Homebrew

Homebrew 為 OS X 最流行的套件管理工具，我們將使用 Homebrew 安裝 NVM。

1
oomusou@mac:~$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

安裝 NVM

NVM 全名為 Node Version Manager，我們將使用 NVM 安裝 Node.js，並使用 NVM 切換 Node.js 版本。

1
oomusou@mac:~$ brew install nvm

為什麼需要切換 Node.js 版本呢?

因為Node.js版本更新快速，你用的套件或工具可能來不及支援新版Node.js，因此實務上有可能必須切換到舊版本的Node.js，才能使用該套件或工具。

安裝 Node.js 與 NPM

目前前端工具大部分都基於 Node.js，其優點是執行速度快，又有跨平台的優勢。

NPM 全名為 Node Package Manager，為 Node.js 的套件管理工具，類似 PHP 的 Composer 角色。

1
oomusou@mac:~$ nvm install 5.7

安裝 Node.js 5.7。

確認 Node.js 版本

1
oomusou@mac:~$ node -v

確認 NPM 版本

1
oomusou@mac:~$ npm -v

安裝 Gulp

Gulp 為前端自動化管理工具，Laravel Elixir 就是 Gulp 的再次封裝。

1
oomusou@mac:~$ npm install -g [email protected]

安裝 Gulp 3.9.1。

-g : 因為每個專案都會用到 Gulp，因此將 Gulp 安裝在 global 區。

確認 Gulp 版本

1
oomusou@mac:~$ gulp -v

安裝 Laravel Elixir

Laravel Elixir 整合了眾多前端工具，讓你不用自己寫 Gulp 就可達到前端自動化。

建立Laravel專案

1
oomusou@mac:~$ composer create-project laravel/laravel Laravel52Elixir --prefer-dist

使用 Composer 建立 Laravel 專案。

安裝 Laravel Elixir 

1
oomusou@mac:~/MyProject$ npm install

安裝Laravel Elixir與前端工具。

測試 Laravel Elixir 

1
oomusou@mac:~/MyProject$ gulp

右上角顯示 Saas Compiled，表示 Node.js、NPM、Gulp 與 Laravel Elixir 安裝成功。

Appendix

若將來需要切換 Node.js 版本，可參考以下方式 :

切換 Node.js版本

顯示 Node.js 所有版本

1
oomusou@mac:~$ nvm list

目前顯示 OS X 除了剛裝的 Node.js 5.7 外，還有 0.12 版，且預設為 0.12。2 2新安裝 Node.js 不會有兩個版本，此為特別示範如何切換 Node.js 版本。

切換目前 Node.js 版本

1
oomusou@mac:~$ nvm use 5.7

將目前 Node.js 切換到 5.7。

設定 Node.js 預設版本

1
oomusou@mac:~$ nvm alias default 5.7

以後整個 OS X 的 Node.js 預設版本就是 5.7。

Conclusion

  • Laravel Elixir 提供了很多前端開發工具，本文只是 Laravel Elixir 的起手式，將難搞的 Node.js、NPM 與 Gulp 先在 OS X 搞定。
  • 當 Laravel Elixir 安裝失敗時，可以參考 Homestead的Node.js、NPM 與 Gulp 版本，就算不使用 Homestead 開發，也可以把 Homestead 當成 golden sample 參考。
  • 若遇到某些套件與工具只能搭配特定 Node.js 版本，別忘了使用 NVM 切換 Node.js 版本。
2016-03-22
▲