js、cssファイルを簡単に圧縮できるDjango Compressorの使い方

以前、jsファイルやcssファイルを圧縮のやり方として、「django-pipelineの使い方」という記事を書きました。これもいいのですが、Django Compressorというモジュールの方が使い勝手がよさそうなので、メモを残しておきます。

目次

  1. Django Compressorのインストール
  2. Django Compressを使ったサンプル
  3. 圧縮の確認
  4. きちんと動作するsettings.py

Django Compressorのインストール

インストールは、pipをコマンドでできます。

pip install django_compressor

なお、この際に「django-appconf」というモジュールも同時にインストールされます。これを削除してしまうと、Django Compressorが動かないのでご注意ください。

pip freeze
--- pip freezeの出力例 ---
Django==1.3.1
django-appconf==0.5
django-compressor==1.1.2
wsgiref==0.1.2

↑ 目次に戻る

Django Compressを使ったサンプル

settings.pyにDjango Compressの設定を追加

まずは、Django Compress用の設定をsettings.pyに追加します。このサンプルでは、以下の項目を修正します。

  • STATICFILES_FINDERS
  • INSTALLED_APPS
  • COMPRESS_ENABLED
STATICFILES_FINDERS = (
    'compressor.finders.CompressorFinder', # 新規追加
)

INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    ...
    'compressor', # 新規追加
)

COMPRESS_ENABLED = True # 新規追加

この中の「COMPRESS_ENABLED」ですが、実際の開発から運用の際には定義する必要はないと思います。同項目は圧縮を有効にするかどうかを表すもので、デフォルト値はsettings.pyのDEBUGの反対となっています。このサンプルではテストサーバーで確認したかったので、「DEBUGをTrueにしたまま圧縮を有効にしたかった」ので、この項目を追加しています。

jsファイル、cssファイルを準備

以下の用なファイルを用意します。

--- common1.js ---
function bt1() {
  alert("ボタン1が押されました。");
  alert("ボタン1が押されました。");
  alert("ボタン1が押されました。");
}
--- common2.js ---
function test() {
  alert('TEST');
}

htmlファイルに圧縮するタグを記述

jsファイルとcssファイルを圧縮するためには、htmlファイルに規定のタグを記述します。まずはloadタグを使ってDjango Compressorを読み込み、その後にcompressタグでjsファイルとcssファイルを圧縮します。

{% load compress %}
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="{{ STATIC_URL }}html5reset-1.6.1.css" />
    {% compress css %}
    <link rel="stylesheet" href="{{ STATIC_URL }}style1.css" />
    <link rel="stylesheet" href="{{ STATIC_URL }}style2.css" />
    {% endcompress %}
    {% compress js %}
    <script src="{{ STATIC_URL }}common1.js"></script>
    <script src="{{ STATIC_URL }}common2.js"></script>
    {% endcompress %}
  </head>
  <body>
    <div id="main">
      Django Compressorのテストです。<br />
      <button onclick="bt1()">ボタン1</button>
    </div>
  </body>
</html>

↑ 目次に戻る

圧縮の確認

テストサーバーでサンプルを動かしてアクセスすると、自動的に静的ディレクトリの下に「CACHE」というディレクトリ(名前はCOMPRESS_OUTPUT_DIRで変更可能)が作成されます。この中に、jsとcssというディレクトリが作成され、ハッシュ値.jsとハッシュ値.cssというファイルが作成されます。

htmlのソースを確認

htmlのソースのjsとcssを読み込む部分は、以下のようになっています。

    <link rel="stylesheet" href="/static/CACHE/css/6f8649b82071.css" type="text/css" />
    <script type="text/javascript" src="/static/CACHE/js/fc6489979396.js">

圧縮されたファイルの確認

作成されたファイルをのぞいてみると、複数のファイルが1つになったりしています。

--- fc6489979396.js ---
function bt1(){alert("ボタン1が押されました。");alert("ボタン1が押されました。");alert("ボタン1が押されました。");}
function test(){alert('TEST');}
--- 6f8649b82071.css ---
body {
  background-color: #f0f0f0;
}

#main{
  font-size: 12px;
  text-align: center;
  background-image: url('/static/tmp2.png');
}

↑ 目次に戻る

きちんと動作するsettings.py

頻繁につまずくので、きちんと動作するsettings.pyを丸ごと残しておきます。

# Django settings for simple_prj project.
import os

SITE_ROOT = os.path.dirname(os.path.realpath(__file__))
DEBUG = True
TEMPLATE_DEBUG = DEBUG
STATIC_ROOT = os.path.join(SITE_ROOT, 'static')
STATIC_URL = '/static/'
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'compressor.finders.CompressorFinder',
)
TEMPLATE_LOADERS = (
    'django.template.loaders.filesystem.Loader',
    'django.template.loaders.app_directories.Loader',
)
MIDDLEWARE_CLASSES = (
    'django.middleware.common.CommonMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
)
ROOT_URLCONF = 'simple_prj.urls'
TEMPLATE_DIRS = (
    os.path.join(SITE_ROOT, 'templates'),
)
INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'compressor',
)
COMPRESS_ENABLED = True

↑ 目次に戻る

この記事が役に立った場合、シェアしていただけると励みになります!!