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

Flash-AssetsでJavaScript/CSSを管理する

Python Flask

オフィシャルドキュメントに書いてあることで十分だけど、練習をかねてチラシの裏に書いてみる。

インストール。

$ pip install Flask-Assets

単純なFlaskアプリケーションで試してみる。

# -*- coding: utf-8 -*-
from flask import Flask, render_template
from flaskext.assets import Environment, Bundle

app = Flask(__name__)
assets = Environment(app)

# yui_js, yui_cssフィルターを使っているので
# yuicompressorのパスの指定が必須
assets.config['YUI_COMPRESSOR_PATH'] = '/path/to/yuicompressor-2.4.2.jar'

# yuicompressorをかけてgen/packed.jsとして出力
js = Bundle('js/jquery-1.5.js',
            filters='yui_js',
            output='gen/packed.js')

# sassをcssに変換し、yuicompressorをかける
css = Bundle('css/base.sass',
             filters=['sass', 'yui_css'],
             output='gen/packed.css')

assets.register('js_all', js)
assets.register('css_all', css)

@app.route("/")
def index(name = None):
    return render_template('index.html')

if __name__ == "__main__":
    app.run(host='0.0.0.0')

テンプレートは、

<html>
<head>
<title>Hello WebAssets</title>
{% assets "css_all" -%}
<link href="{{ ASSET_URL }}" rel="stylesheet" type="text/css" />
{%- endassets %}
{% assets "js_all" -%}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{%- endassets %}
</head>
<body>
<h1>Hello, WebAssets!</h1>
</body>
</html>

のような感じ。css/base.sassは、

$blue:   #3bbfce

h1
  color: $blue

のような単純なもので試してみた。

webassetsはここに書いてあるとおり、CleverCSS, less, Scss/Sass, CompassといったCSSコンパイラ(というのか?独自記法からCSSに変換するライブラリ)に対応している。

この手のCSSコンパイラならば、Pythoner*1にとってはCleverCSSが一般的だと思うけど、webassets経由ならば他のライブラリも手軽に使うことができるので、試してみようかという気にもなるな。

*1:Pythonを使う人のナウでヤングな呼び方