koalaでjsファイルを保存したときに自動で複数ファイルを圧縮[minify]するあれこれ

2017年8月27日2019年2月3日

最近、このブログをリニューアルすべく、Wordpressテーマを自作していました。

せっかく作るので、高速化にもこだわり、googleのスピードテストと向き合いながら作ってました。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/?hl=ja

最初作ったときに計測したら20〜30点ぐらいしかでなくて悲しくなりましたが、、、

最終的に↓ここまで点数を上げました。

概ね満足…!（SPは80点ですが、、、）

で、点数上げるために色々施策を行ったのですが、koalaでjsを1つにまとめて圧縮したのでそれをここに記します。

koalaってそもそも何？

僕が普段sassをコンパイルするときに使っているツールです。難しく言うとGUI操作ができるタスクランナー的なやつなんですが、まあsassファイル監視して保存したらcssを吐き出してくれる便利な奴です。（glupとか使えよって話ですが、koalaが簡単に使えるので離れられないでおります。。）

以前にこんな記事書いてたりしています。

2017年06月19日

bracketsでsassを使う方法と設定を初心者向けにまとめてみる

僕愛用のテキストエディタBracketsでsassを使う方法について。 フリーランスで仕事するとわかるんですが、仕事は早くやればやるほ...

今回koalaでやること

で、ずっとsassのコンパイルにしかkoalaを使っていなかったんですが、googleのスピードテストで点数上げるために、jsを1つにまとめて圧縮してやる必要がありました。それが、koalaで簡単にできたと。

具体的には以下のことがこの記事を読んだらできるようになります。

• jsファイルを保存したら、koalaで圧縮ファイルを自動で作るようにする
• jsファイルをkoalaで1つにまとめて圧縮する

jsファイルを保存したら、koalaで圧縮ファイルを自動で作るようにする

やり方は超簡単です。

プロジェクトをkoalaに追加して、jsファイルを選択する。

で、左にjs用の設定パネルがあるので、以下の項目にチェックを入れる。

• 自動コンパイル
• Compress

これをして、対象のファイルを保存してみると、自動的に[対象のファイル名].min.js と言うフォルダが同じディレクトリに生成されます。

今回はtest1.jsを保存したので、test1.min.jsができました。

ファイルの中身はこうなります。

test1.js

$(function(){

$('body’).fadeIn();

$('.test’).css('display’,’none’);

});

これが圧縮されて

test1.min.js

$(function(){$(“body").fadeIn(),$(“.test").css(“display","none")});

このように圧縮されます。

jsファイルを保存したときに、koalaで複数のjsを1つにまとめて圧縮する

で、圧縮するのはまあ、パネルを見れば予測がつくので説明は不要だったかもしれませんが、koalaで複数のjsファイルを1つに圧縮するのはパネルに見当たらないので、今からの内容は知らない人が多いかもです。

結論と言うと以下のようなコードを入れるとOKです。

// @koala-prepend “before.js"

// @koala-append “after.js"

これを入れるとjsファイルを保存したときに、指定した名前のjsファイルが読み込まれます。上だと「before.js」と[after.js]ですね。

• @koala-prepend
• @koala-append

それで、jsファイルの前にあるこれらなのですが、それぞれ意味があります。1つにまとめたときに、前に入れるのかor後ろに入れるのかと言う意味があります。

• @koala-prepend：指定したファイルをファイルの前に読み込む
• @koala-append ：指定したファイルをファイルの後に読み込む

ファイル名を入れると

• @koala-prepend “before.js"：before.jsを前に読み込む
• @koala-append “after.js"：after.jsを前に読み込む

と言う感じです。

実際にやってみましょう。

以下のようにファイルがあったときに、test.jsを圧縮する場合。

中身はそれぞれ、

test.js

// @koala-prepend “before.js"

// @koala-append “after.js"

$(function(){

$('.test’).css('display’,’none’);

});

before.js

$(function(){

$('.before’).css('display’,’none’);

});

after.js

$(function(){

$('.after’).css('display’,’none’);

});

となっています。

で、この状態でtest1.jsを圧縮すると以下のような、test.min.jsがkoalaによって生成されます。

test.min.js

$(function(){$(“.before").css(“display","none")}),$(function(){$(“.test").css(“display","none")}),$(function(){$(“.after").css(“display","none")});

中身をみると、

before.js→test.js→after.jsの順番で中身がそれぞれ使われています。

と、このような感じでjsファイルを1つにまとめて圧縮できるのです〜。

1つに圧縮すれば、html側で1つのjsだけ読み込めばOKになるので、jsのプラグイン導入とかが楽になります。

koala使っている人はこの辺を導入してみると作業が捗るかもなので、導入してみてはどうでしょう…？