1. 安裝sublime text 2, ruby, nodejs, 將npm及ruby指令集路徑填入system path參數, 如下: (安裝路徑請換成您安裝軟體的實體路徑)
C:安裝路徑AppDataRoaming pm;C:安裝路徑Ruby22-x64in
2. 安裝 sublime pakage control manager
鍵入ctrl+或View>Show Console 然後把以下python code貼入指令視窗
import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
3. 安裝js minifier: 安裝完成後, 鍵入ctrl+shift+p, 輸入install打開package install manager, 輸入minify然後enter
4. 打開cmd,輸入以下指令
npm install -g clean-css uglifycss js-beautify html-minifier uglify-js svgo
5. 確認安裝版本
clean-css --version //檢查clean-css安裝版本
uglifycss --version //檢查uglifycss安裝版本
uglifyjs --version //檢查uglify-js安裝版本
...以此類推可檢查透過npm安裝的程式
6. 安裝sass: 鍵入ctrl+shift+p, 輸入install打開package install manager, 輸入compass然後enter
7. 打開cmd輸入以下指令
gem install sass
gem install compass
8. 安裝完成後找個地方建置compass project, 然後用以下指令來建立專案
compass create compassproject
9. 將建立好的專案用sublime開啟進行編輯，此時您會看到專案內有如下的結構:
10. sass資料夾是您用來管理css的檔案，您可以開始用compass的方式來編寫css,然後到Tool>Build System選擇使用Compass來建構css, 此時，當您鍵入ctrl+b即可把您的scss編譯轉存至stylesheets資料夾中的相對應css檔中
註: 如遇到utf-8編碼問題，可從兩個方式來進行設定:
1. 直接在config.rb中置入以下代碼 (此時編碼只會用在該專案):
Encoding.default_external = 'utf-8'
2. 直接進入sublime text的packages然後找到compass資料夾,開啟compass.sublime-build, 置入以下代碼 (此時編碼只會用到所有專案):
{
"cmd": "sh '${packages}/Compass/build.sh' '${file_path}' '${project_path:${folder}}'",
"working_dir": "$packages/Compass",
"selector": "source.sass, source.scss",
"shell": "true",
"windows":
{
"cmd": "build.cmd "${file_path}" "${project_path:${folder}}""
},
"encoding": "utf-8" <--加入這個
}
FOR OSX會遇到[ERROR] compass not found. Make sure it exists in your PATH.的問題, 主要因為ruby無法正確透過gem 安裝compass,需要如下的相關設定動作
In order to install compass On Mac OS X 10.10 (Yosemite)had to perform the following:
1. Set Up Ruby Environment
Ensure ruby is installed and up to date: ruby -v
Update gem's sudo gem update --system
2. Set Up MAC Environment
-Install the Xcode Command Line Tools this is the key to install Compass. xcode-select --install
-Installing the Xcode Command Line Tools are the key to getting Compass working on OS X
3. Install Compass
sudo gem install compass
