SublimeText(2/3)のbuild systemを使えばいちいちコンパイルの面倒な様々なソースコードが簡単にコンパイルできます。標準で用意されてるいくつかのbuild設定に加え、PackageControlを利用したり自分で.sublime-buildファイル(json記述)を作ってやることでコマンドラインからビルドするようなことは大抵ショートカットが設定できます。

ビルドを設定し、ツール>Build Systemからそれを選択しておけばCtrl+B(Macの場合は⌘Command+B)するだけでビルド。

今回はWindowsでAltJS系やCSSのメタ言語(AltCSS)のコンパイルの一例をご紹介。尚Mac/Linuxでは少し異なる点があるのでご注意。

あと、npm/gemとかのbinにpathが通ってることは前提条件で話を進めます。(あとPackage Controlの有効化とかはほかの人がまとめてくれてるのか公式をご覧ください。)

AltJSのコンパイル

CoffeeScript

CoffeeCompileってパッケージがあるけどどうやらbuild-systemには対応してないみたい。 作りましょう！！

基本設定 > Browse Package で開くディレクトリ下にUserって名前のディレクトリがあるのでそこに次のファイルを作ります。(ツール > Build System > new BuildSystemから新規。自動的に保存時にそこが選ばれる。)

Coffee.sublime-build

{
    "cmd": ["coffee",  "-cm", "$file"],
    "selector": "source.coffee",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "cmd": ["coffee.cmd", "-cm", "$file"]

    }


}

これでnpmとかでインストールしたcoffeeでビルド出来るはず。

TypeScript

こちらもCoffee同様、パッケージコントロールにはないみたい。
同様に作ってやる。

TypeScript.sublime-build

{
    "cmd": ["tsc", "--noImplicitAny", "--sourcemap", "$file"],
    "selector": "source.ts",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "cmd": ["tsc.cmd", "--noImplicitAny", "--sourcemap", "$file"]

    }


}

npmとかでインストールしたtscコマンドを使ってコンパイル出来る。

5/11追記

できればTypeScriptコンパイルには--noImplicitAnyつけてほしい… / “TypeScript - SublimeTextでなんでもかんでもコンパイルする - Qiita” http://t.co/2TDECRSHOP
— わかめ@TypeScriptカッコガチ (@vvakame) 2014, 5月 8

なるほど、暗黙any禁止ですと…デフォで有効にしといてよ…とか言う愚痴は置いておいてとりあえず付加しておきます…←TypeScript全然経験値が無いので(ほぼ0)無知ですいません、なので尚更指摘が欲しい()

あとSublimeTextの教科書でtscコンパイル出来るパッケージ紹介されてたっぽいですね。

AltCSS

そう、ビルドシステムはCSSのコンパイルにだって。()

SASS(SCSS)

パッケージコントロールからSASS buildをインストールすれば使える。

sass3.3以降でsourcemapを使う場合は次のような設定を書いてやる。

SASS.sublime-build

{

    "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache", "--sourcemap"],
    "selector": "source.sass, source.scss",
    "line_regex": "Line ([0-9]+):",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "shell": "true"
    },
    "variants":[
        {
            "name": "Minify",
            "cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.min.css", "--stop-on-error", "--no-cache", "--sourcemap","--style", "compressed"],
            "selector": "source.sass, source.scss",
            "line_regex": "Line ([0-9]+):",

            "osx":
            {
                "path": "/usr/local/bin:$PATH"
            },

            "windows":
            {
                "shell": "true"
            }

        }
    ]

}

なおコマンドパレットでMinifyと入力すると圧縮版(.min.css)が出来ます。

(もちろんgemとかでsass入れておくこと。)

LESS

LESS-buildってパッケージが存在します。しかしこれは少し特殊。ブログで書いたように、Linux/Macならlesscコマンドを、Windowsでは組み込みのコンパイラを使うようになっています。

しかしこんのコンパイラ、1年以上メンテナンスされていない上にSublime3では一手間必要。 やっぱりつくりましょう！

LESS.sublime-build

{
    "cmd": ["lessc", "$file", "${file_path}/${file_base_name}.css", "--verbose"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "selector": "source.css.less",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
        "cmd": ["lessc.cmd", "$file", "${file_base_name}.css","--verbose"]

    },

    "variants": [
        {
            "name": "Minify",
            "cmd": ["lessc", "$file", "${file_path}/${file_base_name}.min.css", "-x", "--verbose","--source-map"],

            "osx":
            {
                "path": "/usr/local/bin:$PATH"
            },
            "windows":
            {
                "cmd": ["lessc.cmd", "$file", "${file_base_name}.min.css", "-x" , "--verbose","--source-map"]
            }
        }
    ]
}

ほぼ流用です。これでnpmとかのlesscが使えます。sourcemap付きです！

js,cssをcompress

Yui Compresserを使えばjsやcssを圧縮してくれます。Package Controlにあるのをそのまま使えるみたい。なお１つ前のバージョンのjarが同梱されてるっぽいので必要に応じて最新版に差し替えてやって。

面倒なコンパイルも簡単なキーボードショートカットで済ませれば作業効率も上がるんじゃないでしょうか。是非、お役立てください。

※ Windows準拠で書いてるけどMacで書いてるので一部検証が間に合っていない部分があります。問題あったら加筆修正します。(指摘待ち)