javascriptとcssを全自動で連結&圧縮する

橋の上から
Creative Commons License photo credit: amadeusrecord

ウェブサイト作るときに、最近は膨大な数のjqueryのプラグインなんかをロードしなくちゃいけない。ロードするファイルが増えるとページのパフォーマ ンスにも影響するのでソースを1ファイルにまとめて、さらに圧縮するのが効果的なんだけど、これを手作業でするのは骨が折れる。特に開発段階では頻繁にソースへの修正が入るので、効率が悪い。そういう訳で自動化した。

こうなる

無数のjsやcssを個別に開発し、HTMLにはcat.phpのパラメータとして各ファイル名を+区切りで記述する。ファイルはdir/a.jsなどとディレクトリを切っても構わない。

<script type="text/javascript" src="./js/cat.php?jquery.1.4.2.js+a.js+b.js"></script>

<link rel="stylesheet" href="./css/cat.php?dir/a.css+dir/b.css" type="text/css" />

これだけで、全てのファイルが連結され、改行やコメント、先頭のCSS以外のcharsetが削除される。また、gzip対応ブラウザにはgzipを出力し、Etagなどのキャッシュ関連のヘッダもいい感じに世話してくれる。ファイルの更新日を常に判定しているので、ファイルに変更が加わればキャッシュはクリアされる(はず)。そういう訳で、一度セットアップしてしまえば、圧縮うんぬんのことは忘れてしまって、どんどんファイルを増やそう。

方法

ライブラリとして下記をダウンロードする。

下記のように配置する。PHPのライブラリは任意の場所で構わないが、cat.phpの先頭のset_include_pathを合わせる必要がある。

[DIR]commons
├[DIR]php
│├[DIR]Minify
││├[DIR]CSS
│││└Compressor.php
│││└UriRewriter.php
││├CommentPreserver.php
││└CSS.php
│└JSMin.php
├[DIR]js
│├[DIR]cache
│├jquery.1.4.2.js
│├a.js
│├b.js
│└cat.php
└[DIR]css
  ├[DIR]cache
  ├a.css
  ├b.css
  └cat.php

※cat.phpに実行権限、cacheディレクトリに書き込み権限が必要。

Google Page Speedつながりで、次回は全自動で画像最適化のネタを書きたい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です