web制作

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

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

この記事の要点!

  • koalaでjsを圧縮できるようになる
  • 複数のjsファイルを1つにまとめることも、圧縮も可能です。

最近、このブログをリニューアルすべく、Wordpressテーマを自作していたんですが、せっかく作るので、いい感じのものを作りたいと思いgoogleのスピードテストと向き合いながら作ってました。

PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja
最初作ったときに計測したら20〜30点ぐらいしかでなくて悲しくなりましたが、、、

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

googleスピードテスト

概ね満足してます…!(SPは80点ですが、、、)

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

koalaってそもそも何?

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

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

2017.06.19

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

僕愛用のテキストエディタBracketsでsassを使う方法について。 フリーランスで仕事するとわかるんですが、仕事は早くやればやるほど、時給換算すると高くなります。これはコーディングも同じで、早くコーディングすればするほど短い時間で早く稼げるようになるので、フリーでWeb制作すると誰しもが早くコーディングしよ

今回koalaでやること

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

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

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

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

やり方は超簡単です。

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

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

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

  • 自動コンパイル
  • Compress

koalaのjs設定パネル

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

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

koalaで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を圧縮する場合。

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

中身はそれぞれ、

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使っている人はこの辺を導入してみると作業が捗るかもなので、導入してみてはどうでしょう…?