Linner和WebStorm前端開發環境搭建
注意：
以下是前端工廠開發環境搭建，主要用到Linner和WebStorm（推薦使用SublimeText 3）和jigglypuff。
1.Linner
Linner是前端工程的開發所使用的編譯打包工具，安裝Linner之前，需要一些軟件環境配置：
1.1 Linner所依賴的軟件
1.1.1 Ruby
Linner是基於Ruby開發的，所以需要Ruby環境
雙擊安裝，需要選擇“InstallTcl/Tk support”和“Addruby executables to your PATH”，可以安裝到默認地址，例如安裝到D:\Ruby21-64目錄下。
安裝結束後，運行ruby -v顯示版本號。如果正常顯示Ruby版本號，表示安裝成功。
如果沒有正常顯示ruby的版本號，則可以自行添加系統變量。
rubyenv.bat
- SETRUBY_HOME=D:/ruby
- SET PATH=%PATH%;%RUBY_HOME%/bin
- SET RUBYOPT=rubygems
把以上代碼複製到記事本，另存爲rubyenv.bat，然後執行文件即可。
1.1.2RubyGems
RubyGems是後面安裝DevKit所需要的。
把下載文件解壓到一個臨時目錄，假設爲F:/temp/rubygems-2.4.4，執行：
- C:\> cd F:/temp/rubygems-2.4.4
- F:\temp\rubygems-2.4.4> ruby setup.rb
然後通過 gem -v 驗證安裝是否成功。
注：
如果使用rubygems進行安裝時提示timeout，則將gems替換成最新版本(從 http://rubygems.org/pages/download 下載rubygems最新版本)- 安裝目錄不能帶有中文；如果執行 gem -v 提示錯誤，可以重啓一遍電腦再執行。
1.1.3安裝DevKit
DevKit是安裝Linner用到的。
官網：http://rubyinstaller.org/add-ons/devkit/
說明：RubyInstaller Development Kit 是在Windows環境下便於構建native的C/C++程序(例如RDiscout和RedCloth)的工具集。
雙擊運行，選擇解壓目標目錄，例如D:\devkit目錄下，運行如下命令：
- <span style="font-size:18px;"> C:\> cd D:\devkit
- D:\devkit>ruby dk.rb init</span>
- <span style="font-size:18px;">
- </span>
隨後編輯該目錄下生成的config.yml文件，在文件最後增加Ruby安裝目錄：
下面這步非必須執行
- D:\devkit> ruby dk.rb review //可選
最後執行安裝：
- D:\devkit> ruby dk.rb install
1.2 安裝Linner
執行安裝
- D:\ gem install linner
1.2.1 gem源
由於linner安裝實際上是從 rubygems.org 獲得的，而其被牆，所以，需要尋找國內的鏡像進行安裝，國內最好的是淘寶鏡像：
更改源的方法：
- D:\ gem sources --remove https://rubygems.org/ //刪除官方源倉庫地址
- D:\ gem sources -a http://ruby.taobao.org/ //增加taobao鏡像倉庫地址
- D:\ gem sources -l //顯示本地保存的倉庫地址
- D:\ gem install linner //繼續安裝
1.2.2 Q&A
如果安裝linner過程中出現Exception:STATUS_ACCESS_VIOLATION這樣的錯誤，則很有可能是安裝的64爲ruby、gems、DevKit不兼容的問題，請都換成32位的重新安裝。
linner最新版本有可能會有錯誤，如出現錯誤，首先刪除linner、sass兩個文件夾，然後geminstall linner -v 0.6.6（或geminstall linner -v 0.6.7），將linner替換成0.6.6或0.6.7。
1.3 WDM
（運行linnerbuild時用到）
安裝WDM
- <span style="font-size:18px;"> D:\ gem install wdm</span>
1.4 Linner運行FAQ
如果Linnerwatch （用於監控前端工程文件變更，自動進行編譯）命令運行產生報錯。
修改ruby已安裝目錄下的command.rb文件，如C:\Ruby21-x64\lib\ruby\gems\2.1.0\gems\linner-0.6.6\lib\linner\command.rb，將文件中def watch下的watch_for_env註釋掉。原因是系統兼容性問題。
2.WebStorm
3. jigglypuff
jigglypuff是一個Web容器，可以方便的進行前端工程的部署驗證
首先需要安裝node.js，安裝完成後，運行：
- <span style="font-size:18px;">D:\ npm install -g jigglypuff</span>
- <span style="font-size:18px;">
- </span>
- [email protected] /.../nvm/v0.11.13/lib/node_modules/jigglypuff
- ├── [email protected]
- ├── [email protected]
- ├── [email protected]
- ├── [email protected]
- ├── [email protected]
- ├── [email protected] ([email protected], [email protected], [email protected])
- ├── [email protected] ([email protected], [email protected])
- └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
4.Nginx
由Nginx進行轉發以及靜態資源配置.
服務器，用來加載頁面工程中用到的靜態資源文件，例如js、css、image等，需要修改附件中的nginx-1.0.15/conf/nginx.conf文件，將“rootE:/WorkSpace/showcase/public;”替換成本地頁面工程路徑，例如替換成“root C:/showcase/public”，表示頁面工程編譯後位置爲C:/showcase/public.
如果上述安裝linner不成功建議使用直接安裝策略：提供已經安裝好環境的機器上直接將linner相關的文件和文件夾打成包，在自己本機上解壓壓縮包按照環境配置文檔配置環境變量等完成安裝.