やりたいこと

例えば、

• hoge.js
• fuga.js
• foo.js
• bar.js

という4つのJavaScriptファイルがあるとして、
これらを順に結合して「main.js」として出力し、
さらにそれをYUI Compressorで圧縮して「main.min.js」を出力したい。

Makefileの例

makefileの基本的な書き方は、入門的な記事がいろんな所にあるのでそちらをご参考に。
上記の処理をする為のmakefileはこんな感じになります。
「Makefile」という名前でJavaScriptファイルと同じディレクトリに保存しておきましょう。

※前記事のyuicコマンドを設定してある前提です

SRC = hoge.js fuga.js foo.js bar.js
COMBINE = main.js
COMPRESS = main.min.js

all : $(COMPRESS)

$(COMBINE) : $(SRC)
    cat $^ > $@

$(COMPRESS) : $(COMBINE)
    yuic <pre wp-pre-tag-0=""></pre>amp;lt; > $@

.PHONY: clean
clean :
    rm -f $(COMBINE) $(COMPRESS)

Line 1-3

結合したいファイル群と、出力用のファイル名をマクロにつっこんでおきます

Line 7-8

catコマンドで結合したいファイル群の中身をまるっと$(COMBINE)の中につっこみます
$^ は依存ファイル全てを展開、$@はターゲットファイルを指します

Line 10-11

yuicコマンド（前記事参照）でYUI Compressorを通して圧縮した結果を$(COMPRESS)の中に突っ込みます

Line 13-15

“make clean” で出力したファイルを削除する為の記述です
$(COMBINE) と $(COMPRESS) で展開される、「main.js」と「main.min.js」を削除します

で、どうするの

make / make all

makeの使い方ですが、ターミナルでMakefileのあるディレクトリに移動し、
makeコマンドを実行するだけです。
あとはmakeの中の人が、main.jsとmain.min.jsを自動的に生成してくれます。

make

make clean

生成したファイルを消して初期化したい場合は次のようにタイプします。

make clean

注意事項

環境に注意

MacやLinuxならば、ターミナルでそのまま実行すればコンパイルしてくれますが、
Windowsではmakeはそのままでは使えず、Cygwin等に頼る必要があります。ご注意を。

結合するスクリプトに注意

単体で読み込まなければ正常に動作しないライブラリ等も存在します。
なので、結合前は動いたのにコンパイルしたら動かなくなった！なんていう事態も起こったり。
闇雲に全て結合・コンパイルしてしまうのは避けたほうが良いかも。

とりあえずインストール

とりあえずYUI Compressorをインストール
というか、ダウンロードして好きなところに保存しましょう。

ダウンロードはこちらから。
YUI Library :: Downloads

MacOSならばJavaははじめから入っているのですぐに使えます。
そんなわけで、早速テスト。

java -jar /the/path/to/yuicompressor/build/yuicompressor-2.4.6.jar foo.js > foo.min.js

ただ、毎回圧縮する度に長いパスを入力するのは
指の体操によるボケ防止以上の価値を見いだせないので、
もっと短いシンプルなコマンドで呼び出せるようにするのが今回の趣旨です。

aliasを使う方法

aliasを作ってターミナルから簡単に呼び出せるようにしておく方法。
単純にターミナルから呼び出すだけならこれだけで十分ですよね。

例えば、こんな行を .bashrc に追記しておきます。
jarファイルのパスは環境にあわせて読み替えてください。

alias yuic="java -jar /the/path/to/yuicompressor/build/yuicompressor-2.4.6.jar "

すると、yuicというコマンドを打つだけでYUI Compressorを呼び出せるようになります。
こんな感じに。

yuic foo.js > foo.min.js

「うごかねえぞ！？」という時は、
落ち着いて静かにターミナルを再起動するか、
.bashrcをsourceで実行すると解決するかもしれません。

source .bashrc

シンボリックリンクを使う方法

もう一つは、ごく簡単なシェルスクリプトを用意しておいて、
パスが通っている場所にシンボリックリンクを設置しておく方法。

例えばこんなシェルスクリプトをインストールしたディレクトリに設置して
実行権限を与えておく。

cd /the/path/to/yuicompressor/
touch yuic
chmod u+x yuic

中身はこんな感じで。パスは読み替えてください。

#!/bin/sh
JARFILE="/the/path/to/yuicompressor/build/yuicompressor-2.4.6.jar"
java -jar $JARFILE $@

あとはそのシェルスクリプトへのシンボリックリンクを、
パスが通っているディレクトリ、例えば/usr/bin/等に設定してみます。

sudo ln -s /the/path/to/yuicompressor/yuic /usr/bin/yuic

これで、上のAliasの例同様にyuicコマンドが動くようになりました。
やったね！

つづくのです

alias使えば簡単なのに、なんでこんなまだるっこしいことをしているのかというと、
makeから使いたかったから。 これはどうやらaliasではうまく機能しないみたいですね。

次回はmakeとYUI Compressorによる、
JavaScriptの圧縮＋結合のお話をしたいと思います。