Sublime Text2 から Grunt を発動する方法

またしてもメモ。

今僕はST2でコーディングしてて、css は SCSS で書いて Grunt watch でコンパイルしてます。

で、ちょこちょこと色んな案件の修正とかしてると、watchしてるターミナルのタブが偉いことになって作業が億劫になってしまいます。

頑張って名前つけてるけどもう毎回どのタブ開けば良いか分かんなくなる(´･_･`)

なので、Sublime Text2からwatchできないかなぁと思ってちょっと調べてみました。

結果そういう事が出来るみたいのなのでやってみました。

sublimetext2 – Sublime Text 2 build with Grunt v0.4.0 – Stack Overflow

ただし、watch ではなく grunt コマンドですけど。僕は grunt か grunt watch だけできればそれで十分なのでそれで良いとします。

GruntをBuildに登録する

やりかたは割と簡単でパッケージとかでもなんでもないです。ファイルを1つ作っておくだけ。

メニューから

Tools > Build System > New Build System…

を探しましょう。

すると、新規ファイルを開くので、以下を記述します。

{
    "cmd": ["grunt", "--no-color"],
    "selector": ["Gruntfile.js"],
    "path": "/usr/local/bin",
    "working_dir": "${project_path}",
    "osx": {
        "cmd": ["grunt", "--no-color"]
    }
}

これだけ。

あとはこれを保存します。 cmd+s を押したら多分所定の位置が選択されてると思うけど、とりあえず以下に保存してください。

~/Library/Application\ Support/Sublime\ Text\ 2/Packages/User

ファイル名は Grunt.sublime-build とかで良いんじゃない？

実行する

これで完了なので、実行したいときは

Tools > Build System > Grunt(ファイル名)

これを選択。何かデフォルトで cmd+b でもいけたよ。最後に選択した（or作った）ビルドシステムがデフォルトになるのかな？

なので、

• scssを保存したいときは cmd+s をタイプ
• 保存時にコンパイルしたいときは cmd+s -> cmd+b

ってやれば良いのかな。

これでもういちいちターミナルのタブを増やさなくてすみますね。

最後に

上で書いたように、僕は今 watch をやめて、コンパイルしたいときに cmd+b をタイプするようにしてみました。最初は「watch できないのはヤだなぁ」と思ってたんですが、意外に辛くないです。

というか、よくある話なんですが、修正・作成の一連の流れを行ってるときに、複数ファイルにまたがってSCSSファイルを修正する、という事は割とよくあると思います。 .list-style01 のスタイルを変更したいときに、 a.scss でフォントを修正、 b.scss でレイアウトを変更したい、とかそういう時ね。

そういった時、watch だと、 a.scss を保存したあとコンパイルして、 b.scss を保存した後にまたコンパイルするわけですよ。これ、無駄じゃね？って毎回思ってました。 a.scssを保存したときにはコンパイルしてくれなくて良いわけですよ。

それが今回の変更で解消されることは「無駄をなくす、美しい作業フロー」みたいな自己満足の世界で喜ぶべき事だったり、単純にwatch出来ない事の何がいやだったかという本当の理由が「アプリとか画面を切り替えるのが面倒くさい」というだけだったんだなぁと気づかされます。

本当の理由に気づくって中々難しいけど、そういう事を突き詰めて考えれるようになりたいもんだなぁとおもいました。

あと、たぶん今回のって色々やれると思うんですよね。それこそ grunt watch をST2からやれたり開発中と公開時のコマンド打ち分けとかも出来ると思うの。

でも実はまだ grunt そんなによく分かってないから誰か知ってる人がいたら教えてください。