Flask-assetsインスタンス学習

2478 ワード

参考ドキュメント:Building websites in Python with Flask著作権所有、転載は出典を明記してください
Flaskによるweb開発では、多くの静的CSSやJSファイルが使用されることが多く、多くのスペースを占有していますが、これらの静的ファイルを1つのファイルにパッケージして圧縮処理する方法はありませんか?Flask-assetsはこの機能を提供しています.Flask-assetsは実際にwebassetsライブラリをカプセル化しています.
インストール
$ pip install Flask-Assets

パッケージングオブジェクトの作成
私のリソースファイルがstatic/ディレクトリに格納されているとします.その中にサブディレクトリ/css/jsおよび/vendorが含まれています.コード構造は次のとおりです.
example/
  static/
    css/
      layout.less
    js/
      main.js
    vendor/
      bootstrap/
        css/
          bootstrap.css
        js/
          bootstrap.min.js
      jquery/
        jquery-1.7.2.min.js

Webassetsでは、リソースファイルがグループ化されてパッケージ化されます.次はパッケージファイルassetsです.pyの構成:
from flask_assets import Bundle

common_css = Bundle(
    'vendor/bootstrap/css/bootstrap.css',
    Bundle(
        'css/layout.less',
        filters='less'
    ),
    filters='cssmin', output='public/css/common.css')

common_js = Bundle(
    'vendor/jquery/jquery-1.7.2.min.js',
    'vendor/bootstrap/js/bootstrap.min.js',
    Bundle(
        'js/main.js',
        filters='closure_js'
    ),
    output='public/js/common.js')

ここでは、cssファイルをパッケージ化し、jsファイルをパッケージ化する2つのパッケージオブジェクトを定義します.また、パッケージオブジェクトをネストして定義し、パッケージオブジェクトに異なるフィルタを指定します.
パッケージファイルの使用
{% assets "common_css" %} 
    
{% endassets %}
{% assets "common_js" %}
    
{% endassets %}

パッケージファイルの
from flask_assets import Environment
from webassets.loaders import PythonLoader as PythonAssetsLoader
import assets

# ...

assets_env = Environment(app)
assets_loader = PythonAssetsLoader(assets)
for name, bundle in assets_loader.load_bundles().iteritems():
    assets_env.register(name, bundle)

のコードでは、PythonAssetsLoaderを して をロードし、パッケージオブジェクトをEnvirnmentに します.デバッグ を くには、アプリケーションパラメータに ASSET_DEBUG=Trueを します.
コマンドラインコマンドの
from flask_assets import ManageAssets
from example import assets_env

# ...

manager.add_command("assets", ManageAssets(assets_env))

のコマンドを してファイルをパッケージングできます.
$ ./manage.py assets rebuild