これに対応するために import.js というスクリプトを作って<script>タグをdocument.writeしたりもしますが、数が多くなるとレスポンスが悪かったり、いろいろジレンマが発生してきます。
これらをSublimeTextでショートカット一発で解決する方法を考えてみました。
と、いっても、ものすごいレガシー感いっぱいの内容ですが・・
- JS圧縮ライブラリ (UglifyJS等) をインストールする
- それを使うためのバッチファイルやシェルスクリプトを書く
- SublimeTextでショートカットキー一発で呼び出す設定を書き、設定
1 はインストールなのでここでは特に説明しませんが、UglifyJSの場合、node.jsインストールしてnpmコマンドでインストールするのがが2ステップで入れれるので一番楽だと思います。例はUglifyJSになっています。
2 は単に3で書く部分を簡略化するためです。ファイルを追加したりする場合にSublimeTextで編集しやすかったり、テストも楽なので、この方法が便利です。
いざとなればこのファイルをたたけば結合してくれるのも便利。
例:
以下は該当のjs群がある同一ディレクトリに __build.bat というファイル名で作った場合のサンプル。
PC用import.jsとスマホ用import-sp.jsの2ファイルを作成しつつ、各ファイルはそれごとに指定の複数のJSファイルを1つのファイルに結合したい。
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
他のBuildSystemを使ってる場合は3は結構作りこむ必要がありますが、使ってない場合は上記だけでOKです。
で、この準備ができたら [Tool] > [Build System] >[CallBuildbat] (3 で保存した名前)を選びましょう。
そして、該当のJSファイルを開いて Ctr+B を押すと、さくっと複数ファイルが結合した import.js と import-sp.js が出来上がってるはずです。
なんて簡単!
ほかにも、いろいろ設定がかけますが、自分で使いやすいようにカスタマイズしてみてください。
保存先は上記で作った場合は保存時のデフォルトでOKです。
例:
CallBuildbat.sublime-build
{
"cmd":["__build.bat"]
}
他のBuildSystemを使ってる場合は3は結構作りこむ必要がありますが、使ってない場合は上記だけでOKです。
で、この準備ができたら [Tool] > [Build System] >[CallBuildbat] (3 で保存した名前)を選びましょう。
そして、該当のJSファイルを開いて Ctr+B を押すと、さくっと複数ファイルが結合した import.js と import-sp.js が出来上がってるはずです。
なんて簡単!
ほかにも、いろいろ設定がかけますが、自分で使いやすいようにカスタマイズしてみてください。