2012年11月30日金曜日

JavaScriptのファイル結合をSublimeTextから簡単に実行する方法

最近のJavaScriptのつくりとして、jQuery等のプラグインを使ったりしてると複数のJavaScriptを読み込まないといけなくなります。
これに対応するために import.js というスクリプトを作って<script>タグをdocument.writeしたりもしますが、数が多くなるとレスポンスが悪かったり、いろいろジレンマが発生してきます。

これらをSublimeTextでショートカット一発で解決する方法を考えてみました。
と、いっても、ものすごいレガシー感いっぱいの内容ですが・・
  1. JS圧縮ライブラリ (UglifyJS等) をインストールする
  2. それを使うためのバッチファイルやシェルスクリプトを書く
  3. SublimeTextでショートカットキー一発で呼び出す設定を書き、設定
1 はインストールなのでここでは特に説明しませんが、UglifyJSの場合、node.jsインストールしてnpmコマンドでインストールするのがが2ステップで入れれるので一番楽だと思います。例はUglifyJSになっています。

2 は単に3で書く部分を簡略化するためです。ファイルを追加したりする場合にSublimeTextで編集しやすかったり、テストも楽なので、この方法が便利です。
いざとなればこのファイルをたたけば結合してくれるのも便利。
例:
以下は該当のjs群がある同一ディレクトリに __build.bat というファイル名で作った場合のサンプル。
PC用import.jsとスマホ用import-sp.jsの2ファイルを作成しつつ、各ファイルはそれごとに指定の複数のJSファイルを1つのファイルに結合したい。

__build.bat
call uglifyjs -o import.js hoge1.js jquery.js jquery.hoge2.js jquery.hoge3.js hoge4.js
call uglifyjs -o import-sp.js jquery.js jquery.hoge2.js jquery.hoge3.js hoge5.js
3 はSublimeTextで [Tool] > [Build System] > [New Build System...] を選ぶと、Build(Ctr+B)で実行できる設定ファイルのテンプレが開きます。それに 2 で作ったファイル名を書くだけ。
保存先は上記で作った場合は保存時のデフォルトでOKです。
例:

CallBuildbat.sublime-build

{
"cmd":["__build.bat"]
}

 他のBuildSystemを使ってる場合は3は結構作りこむ必要がありますが、使ってない場合は上記だけでOKです。

で、この準備ができたら [Tool] > [Build System] >[CallBuildbat] (3 で保存した名前)を選びましょう。
そして、該当のJSファイルを開いて Ctr+B を押すと、さくっと複数ファイルが結合した import.js と import-sp.js が出来上がってるはずです。

なんて簡単!

ほかにも、いろいろ設定がかけますが、自分で使いやすいようにカスタマイズしてみてください。