読者です 読者をやめる 読者になる 読者になる

hakobera's blog

技術メモ。たまに雑談

uglify-me : UglifyJS のフロントエンドを作った

既にあるような気もするのですが、ちょっとだけ特殊な要件に対応したかったので、uglify-me という JS 圧縮ライブラリである UglifyJS のフロントエンドを Node.js で組んでみました。

hakobera/uglify-me · GitHub
デモ

以下のようなケースにマッチします。

  • ビルドサーバや、各開発者のマシンに Node.js が様々な理由で入れられない
  • Closure Compiler Service API で圧縮するのは、セキュリティ上の理由などでダメだと言われた
  • 圧縮用処理がシェルスクリプトだけで記述できなければいけない

ようするに、既存のアプリ、インフラ、開発環境にほとんど手を加えずに、JS の圧縮を実現するにはどうすれば良いか、という思想で作ってあります。上記のケースに当てはまらない場合、普通に UglifyJS の CLI か、Closure Compiler API を呼べば良いと思います。

使い方

clone してきて、npm インストールして、起動するだけです。

$ git clone git://github.com/hakobera/uglify-me.git
$ cd uglify-me
$ npm install
$ node app.js

実運用する場合は forever などで起動してください。環境変数で起動するポート番号も変更できます。

$ PORT=9000 forever app.js

画面はこんな感じです。

f:id:scalar:20120126024714p:image:w640

現状の出力結果は以下のコマンドの出力結果と同等です。

$ uglifyjs -nc source.js

圧縮処理を行うシェルスクリプト

uglify-me の本命はこっちです。画面なんてデバッグ用のおまけです。

  • アプリのデプロイ前に JS を圧縮したい
  • でも、ビルドサーバには標準的なコマンドしか入っていない
  • ローカルネットワーク内の別のサーバにアクセスすることはできる

この制約下で複数の JS ファイルを1つのファイルにまとめて、圧縮するまでを実現するシェルスクリプトとしては以下のようなものを組みます。

ここでは uglify-me を http://uglifyserver:9000 で運用していると仮定します。

uglify.sh

#!/bin/sh
CURRENT=$(cd $(dirname $0) && pwd)

files=''
num=1

echo "Find uglify target files in $CURRENT/$1"
for JS in `ls $CURRENT/$1/*.js`
do
  files="$files -F f$num=@$JS"
  num=`expr $num + 1`
  echo "found $JS"
done

echo "curl $files $2"
curl $files $2 > $3
$ uglify.sh javascripts http://uglifyserver:9000/uglify app.min.js

というわけで、これで複数 JS ファイルの連結から、圧縮までできました。

単純に1ファイルのみを圧縮したい場合は、以下で実現できます。

$ curl -F f=some.js http://uglifyserver:9000/uglify > some.min.js

まとめ

  • uglify-me は UglifyJS のフロントエンド
  • インハウス(社内限定とか)で圧縮サーバを手軽に立てるのに便利
  • curl が入っていれば良いので、利用する側の環境構築がほぼ不要