Flask-Assets執行個體學習

參考文檔：Building websites in Python with Flask

版權所有，轉載請注明出處

在使用Flask進行web開發中，經常會用到很多的靜态CSS或JS檔案，占用了大量的空間，有沒有辦法可以将這些靜态檔案打包成一個檔案，并進行壓縮處理呢？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檔案。而且裡面還嵌套定義了打包對象，以便對打包對象指定不同的過濾器。

使用打封包件

{% assets "common_css" %} 
    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
{% endassets %}
{% assets "common_js" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% 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           

複制