Sublime Text 2 単体でLESSをコンパイルする設定方法

Sublime_Build_LESS.md

Sublime Text 2 単体でLESSをコンパイルする方法

まずはnpm（Node Package manager）でlessをインストール

環境によってはsudoを付ける。

$ (sudo) npm install -g less

Node.jsを入れてない場合はこちらを参考に。

https://gist.github.com/gaspanik/5410891

（元々lessというコマンドがあるのでコマンドラインでそのまま使う場合はlesscがコマンド名）

Sublime Textにプラグインの「LESS Build」を入れる。

インストールはPackageControlから。https://github.com/berfarah/LESS-build-sublime

Sublime TextのビルドシステムはPATHを通さないとエラーになるのでlesscの場所を指定してあげる。

/Users/username/Library/Application Support/Sublime Text 2/Packages/LESS-build/LESS.sublime-build

に書く。

lesscの場所はターミナルで

which lessc

でわかります。

{
    "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": ["$packages\\LESS-build\\dotless.Compiler.exe", "$file", "${file_base_name}.css"] //To just store the css in the same folder as the less
    },

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

            "osx":
            {
                "path": "/usr/local/bin:$PATH"
            },
            "windows":
            {
                "cmd": ["$packages\\LESS-build\\dotless.Compiler.exe", "-m", "${file}", "${file_base_name}.min.css"]
            }
        }
    ]
}

こんな感じに。

プラグインの「OnSaveBuild」を入れておくと保存と同時にビルドしてくれる。

インストールはPackageControlから。https://github.com/alexnj/SublimeOnSaveBuild　　

入れた後は、メニューバーの Preference PackageSettings SublimeOnSaveBuildSettings - User で自動ビルドするファイルをコントロールできる。

{
"filename_filter": "\\.(ts|css|js|sass|less|scss)$",
"build_on_save": 1
}

プラグインの「Browser Refresh」も入れてショートカットキーをCmd+Sにしておけば保存と同時にブラウザもリロードしてくれる。

インストールはPackageControlから。https://github.com/gcollazo/BrowserRefresh-Sublime

ショートカットの変更はPreference KeyBindings-Userにこんな感じに追記、delayとかはお好みで、

{"keys": ["command+s"], "command": "browser_refresh", "args":
{
        "auto_save": true,
        "delay": 0.6,
        "activate_browser": false,
        "browser_name" : "all"}
}

keysの所をcommandじゃなくてsuperと書くとCmd+sでSaveができなくなるので注意。

普通のCSSやhtmlも保存と同時にリロードしてくれるので便利です。

プラグインの「LiveReload」でもできるけどScssを使うときにconfig-rb勝手に生成しちゃうのでこっちのほうが良いかも。　　

参考　http://www.fu-studio.net/sublime-text-2-scss-config-rb/

同じような感じでビルドするPackageを入れて設定してあげればその他の言語もSublimeだけでコンパイル可能