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