Sublime Text2開發CoffeeScript程式:Windows環境設定

最近把CoffeeScript的IDE改成了Sublime Text2
但因為我是使用Windows,所以遇到了不少的麻煩,花了些時間修正,以下是詳細的安裝步驟
  1. 安裝NodeJS
  2. 安裝coffee-script
    (command line下執行下列指令)
    npm install -g coffee-script
  3. 安裝Sublime 2
  4. 安裝Sublime Package Control:
    a. 開啟sublime text2
    b. ctrl+` 帶出指令視窗
    c. 輸入下列指令
    import urllib2,os; 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())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'
    d. 重開sublime text2即完成Sublime Package Control的安裝

  5. 輸入ctrl+shift+P或從功能選單選擇Preferences -> Package Control,之後選擇Package Control: Install Package (如果沒顯示Package Control表示Sublime Package Control安裝失敗),應會出現下面這個選單
    選擇Install Package會跳到另一個選單,輸入NodeJS
    並以同樣的步驟安裝coffeescript package
    到這步為止,我們已經讓sublime text2對nodejs & coffeescript有基本的支援了(code completion, syntax highlight, snippets等)
  6. 因為我想在Sublime Text2裡面直接執行cake build,所以做了以下的修改:
    a. 功能選單選擇Preference->Browse Packages進入Packages資料夾
    b. 進入CoffeeScript資料夾,編輯 CoffeeScript.sublime-build
    c. 檔案應該長的像這樣子
    {
     "cmd": ["cake", "sbuild"],
     "path": "/usr/local/bin:$PATH",
     "selector": "source.coffee",
     "working_dir": "$project_path"
    }
    d. 替換成下列
    {
        "cmd": ["cake.cmd", "build"],
        "selector": "source.coffee",
        "working_dir": "$project_path",
        "variants": [
            { 
             "cmd": ["cake.cmd", "test"],
             "name": "Test"
            },
            { 
             "cmd": ["cake.cmd", "watch"],
             "name": "Watch"
            },
            { 
                "cmd": ["cake.cmd", "docs"],
                "name": "Generate Docs"
            }
        ]
    }
    (需要注意的是在windows底下,指令部分需要加.cmd)
    e. 此設定是對應CoffeeScript Template建立的,但原template在windows下面需要做點修正,把color code作escape(第5-8行),並在指令後面都加上了.cmd
    fs = require 'fs'
    {print} = require 'util'
    {spawn, exec} = require 'child_process'
    
    bold = `'\033[0;1m'`
    green = `'\033[0;32m'`
    reset = `'\033[0m'`
    red = `'\033[0;31m'`
    
    walk = (dir, done) ->
      results = []
      fs.readdir dir, (err, list) ->
        return done(err, []) if err
        pending = list.length
        return done(null, results) unless pending
        for name in list
          file = "#{dir}/#{name}"
          try 
            stat = fs.statSync file 
          catch err 
            stat = null
          if stat?.isDirectory()
            walk file, (err, res) -> 
              results.push name for name in res
              done(null, results) unless --pending
          else
            results.push file
            done(null, results) unless --pending
    
    log = (message, color, explanation) -> console.log color + message + reset + ' ' + (explanation or '')
    
    launch = (cmd, options=[], callback) ->
      app = spawn cmd, options
      app.stdout.pipe(process.stdout)
      app.stderr.pipe(process.stderr)
      app.on 'exit', (status) -> callback?() if status is 0
    
    build = (watch, callback) ->
      if typeof watch is 'function'
        callback = watch
        watch = false
      log ":-)", green
      options = ['-c', '-b', '-o', 'lib', 'src']
      options.unshift '-w' if watch
      launch 'coffee.cmd', options, callback
    
    mocha = (options, callback) ->
      if typeof options is 'function'
        callback = options 
        options = []
        
      launch 'mocha.cmd', options, callback
    
    docco = (callback) ->
      walk 'src', (err, files) -> launch 'docco.cmd', files, callback
    
    task 'docs', 'generate documentation', -> docco()
    task 'build', 'compile source', -> build -> log ":)", green
    task 'watch', 'compile and watch', -> build true, -> log ":-)", green
    task 'test', 'run tests', -> build -> mocha -> log ":)", green
    f. 這個Cakefile會需要用到:mocha(測試用)跟docco(產生文件用)
    npm install -g mocha
    npm install -g docco
  7. 設定好之後,用sublime text2開啟專案,ctrl+b會直接呼叫cake執行build工作:把src資料夾下面的coffee檔全部編譯成js並放到lib資料夾下面去,如有需要修改設定只要修改Cakefile就可以了。
  8. 如果要執行其它build task:快速鍵ctrl+shift+p開啟選單,輸入Build:就會看到
    也可以從Preferences>Key Bindings自訂快速鍵來顯示build task:
    { "keys": ["ctrl+alt+shift+b"], "command": "show_overlay", "args": {"overlay": "command_palette", "text": "Build: "} }
    其中ctrl+alt+shift+b可以替換成任何想要的快速鍵
注意事項:
  1. 如果Build不是呼叫Cake或是不能Build,功能選單Tool->Build System選擇CoffeeScript
  2. Sublime的build設定檔只寫了四個task,build/watch/test/docs,可以自己增加,但要確定Cakefile中也有相對應的task,否則系統會自動呼叫預設的cake build
  3. 目前找不到好用的Remote SSH Editing Plugin,不是要錢就是功能不太完整,有人有推薦的嗎?

2 則留言:

  1. 我現在環境也是windows+node.js+sublime呢~謝謝分享喔!

    回覆刪除
    回覆
    1. 有機會就多分享心得交流吧 :D

      刪除