建立sublime text 2 sass 及 js 開發環境

2015-07-14

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

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【148788】
digishot webdesign studio