【windows】Idea+ruby+Gem+Scss搭建css開發環境

1.先安裝最新版的ruby:

傳送門：http://rubyinstaller.org/downloads/

安裝的時候，必定要容許寫入環境變量（add to Path）
須要安裝對應的安裝包（64位或者32位）

2.安裝完成後，再打開 開始 -> 運行 -> cmd

3.輸入以下代碼：

gem sources --remove https://rubygems.org/
gem sources -a https://ruby.taobao.org/
gem sources -l

#輸出
*** CURRENT SOURCES ***
https://ruby.taobao.org # 請確保只有 ruby.taobao.org

有一段時間，淘寶的鏡像不能用了，能夠去百度下別的鏡像，好比ruby-china

$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org
# 確保只有 gems.ruby-china.org

4.再輸入:

gem install sass
gem install compass

這一步是爲了在ruby安裝路徑下生成SCSS.bat文件去監聽SCSS文件。

5.安裝完成以後，咱們須要爲IDEA添加file watcher插件

其中，arguments的配置爲：

–no-cache –update –style compressed

$FileName$:$FileNameWithoutExtension$.css

6.安裝成功，重啓編輯器便可。