DjangoでJavascriptとCSSを簡単に圧縮する方法

Python

この前公開されたDjango用のJavascriptとCSS圧縮ツール｢django-compress｣がとてもいい感じで使いやすいです。複数のJavascriptやCSSを一つにまとめるのはもちろん、難読化や無駄なスペースや改行の削除を自動で行ってくれます。


圧縮に使用するソフトウェアは、デフォルトではJsminとCSSTidyを使用する設定になっているのですが、他のツールを自分で設定すれば何でも使えます。なので、Javascript圧縮ツールとして超有名な/packer/を代わりに使うことも簡単にできます。


今回は、デフォルトのJsminとCSSTidyを用いた圧縮方法を説明します。

  1. まず、Subversionでコードをチェックアウトしてください。
  2. 次にdjango-compressをインストールします。
    • python setup.py install
    • ダウンロードしたディレクトリ内で上のコードを実行すれば自動でインストールされますが、もし手動でインストールしたい場合はPYTHONPATHが通るところへ適当に設置すればよいです。（たとえばdjangoを置いてるsite-packagesとか）
  3. djangoのsettings.pyのINSTALLED_APPSに'compress'を追加してください。

これで下準備完了。


次に、以下のコード参考に圧縮したいコードの情報をsettings.pyに挿入。
場所はどこでもいいです。一番下とかどうでしょう。

COMPRESS = True
CSSTIDY_BINARY = 'C:/htdocs/csstidy-1.3-exe/csstidy.exe'

COMPRESS_CSS = {
    'demo_css': {
        'source_filenames': ('css/style.css', 'css/foo.css'
　　　　　　　　, 'css/bar.css'),
        'output_filename': 'css/demo_compressed.css',
        'bump_filename': True,
        'extra_context': {
            'media': 'screen,projection',
        },
    },
    
    # other CSS groups goes here
}

COMPRESS_JS = {
    'demo_js': {
        'source_filenames': ('js/jquery-1.2.3.js', 
　　　　　　　　'js/jquery-preload.js', 'js/jquery.pngFix.js',
        'js/my_script.js', 'js/my_other_script.js'),
        'output_filename': 'js/all_compressed.js',
        'bump_filename': True,
    }
}

コードの中身で理解しておきたい部分を解説します。


まず、CSSTIDY_BINARY。これはCSSTidyのバイナリファイルへのパスです。もしまだダウンロードしていなければ、予めダウンロードして適当な所へ設置しておいてください。上の例は、ローカル開発環境でWindowsを使っていると想定しています。


COMPRESS_CSSは、圧縮したいCSSの情報を記載する場所です。demo_cssの部分はグループ名なので適当な名前をつけてください。source_filenamesってのは必須のパラメタ−で、一つにまとめて圧縮したいCSSファイルへのパスを羅列します。


ここで注意しておきたいのは、パスはメディアファイルの設定からのパスという点です。


なので、予めMEDIA_ROOTとMEDIA_URLはきちんと設定しておいてください。


output_filenameというのは、まとめたファイルの出力名です。既存のファイルと重複しない粋な名前をつけてあげてください。


同じように、COMPRESS_JSも適当に設定してください。Jsminはダウンロードしなくても使えるので、設定する必要は特にありません。


最後に、テンプレートファイルの読み込みたい箇所に以下のように書き込みます。

{% load compressed %}
{% compressed_css 'demo_css' %}
{% compressed_js 'demo_js' %}

ここで、予め設定したグループ名を使っているわけです。複数のグループを設定してページによって使いわけたりすることも簡単ですね。


これで、Djangoが自動的に複数のJavascriptとCSSを一つにまとめて且つ圧縮して表示してくれるようになります。圧縮ファイルの更新は自動判別で、グループ内のファイルで圧縮されたファイルよりも新しいものがあれば自動更新、なければ圧縮済みのものをそのまま表示と勝手に判断してくれます。超優れもの。


手動で圧縮したい場合は？

python manage.py synccompress

自分で設定ファイルを書いて、Jsminの代わりにpackerを使うのも簡単なんですが、これは長くなったのでニーズがありそうだったら追記します。