Capistranoでデプロイ時にJavascriptの圧縮を行う

rails js

前回の記事(http://d.hatena.ne.jp/tohae/20110812/1313116651)で、ほんものの社長がコメントしたり、文章をちょっと修正するなどして、前の会社でも同じようなことをしたなぁと懐かしい気持ちになって、ちょっとブログが楽しくなってきたのでブログ書くことにします。

今回はYSlowやGoogle Page Speedなんかで忠告される、Javascriptを圧縮（難読化？）してファイルサイズを減らして高速化しようというお話を、uglifyjsとcapistranoでデプロイする時に自動的にやってみようという話です。

UglifyJSのインストール

UglifyJSはnode.jsで作られたJSの圧縮ツール。jQueryの圧縮にも使われているそうです。
というわけでまずはnode.jsを入れる必要があります。
naveとかで入れるほうが流行りなのかもしれませんが、めんどくさいのでbrew installしました。

$ brew install node

UglifyJSはnpmで入れる方がよさげ？なので、次はnpmを入れます

$ curl http://npmjs.org/install.sh | sh

npmが入ったらようやく本題のUglifyJSを入れます

$ npm install uglify-js -g

-gオプションはグローバル領域に入れるやつみたいで、/usr/local以下に入りました。付けないと~/.npm以下に入りました。付けずにやるとuglifyjsがないよみたいに怒られたのでよくわからず-gオプションを付けました。まぁ動いてるからいいかなと

動作確認

適当にJSファイルを作って保存します。

//hoge.jsで保存
var hoge = new Array(1,2,3,4,5);
alert(hoge);

uglifyコマンドで圧縮します

$ uglify hoge.js
//hoge.jsで保存
var hoge=[1,2,3,4,5];alert(hoge)

実行結果が出力され、Arrayが短い書き方になったり、改行が取り除かれたりしています。
ファイルに出力したり、コメントを取り除いたりなどいくつかのオプションがありますが、詳しくはgithubを見たほうが良いです。
https://github.com/mishoo/UglifyJS

CapistranoからUglifyJSを使う

デプロイ前にJSを圧縮してコミットするのはだるいので、デプロイ時にJSを圧縮して上書きしてしまえばいいよねって思ったので、capistranoにタスクを追加します。
config/deploy.rbに以下のようなタスクを追加

after "deploy:update_code", "deploy:minify_js"
namespace :deploy do
  task :minify_js do
    run <<-CMD
      cd #{release_path} &&
      /usr/local/bin/uglifyjs --overwrite public/javascripts/application.js
    CMD
  end 
end

deploy:update_code (ソースコードのアップデート）が終わったあとに、release_pathに移動して、public/javascripts/application.jsを圧縮して上書きするというタスクです。
こうしておけば、cap deployとかcap deploy:migrationsとかしたときに必ず圧縮されて便利ですね！

最後に

こうしてブログには書いたものの、この方法だと各サーバにnode.jsを入れる必要があってだるいので、本番に導入は今のところしてません。
一応試してみたしブログのネタにはなるかなと思って書いたのでした。
本番に導入されてYSlowやGoogle Page Speedの評価が高くなる日は来るのか！？来るといいですね…