专栏首页nummyFlask-Assets实例学习

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vultr搭建hexo博客

    需要创建一个普通用户用于运行博客,下面创建一个vultr用户,并将其添加到用户组wheel跟nginx。

    用户2936342
  • Jupyter notebook 快速入门

    在浏览器中输入http://localhost:8888,就出现了notebook的页面。

    用户2936342
  • Grunt快速入门

    Grunt是基于JavaScript的命令行构建工具,它可以帮助开发者们自动化重复性的工作。你可以把它看成是JavaScript下的Make或者Ant。它可以完...

    用户2936342
  • 前端资源版本控制的那些事儿

    本文作者:IMWeb 李冬冬 原文出处:IMWeb社区 未经同意,禁止转载 先来个最原始的页面,比如下面的index.html中,引入了css和js资...

    IMWeb前端团队
  • 前端资源版本控制的那些事儿

    写完后,部署上线。然而我们要考虑充分利用浏览器缓存,我们的目标是资源文件直接读取浏览器缓存,于是给它设置 Cache-Control/Expires 和 Las...

    IMWeb前端团队
  • 表格插件-bootstrap table的表内查看编辑删除

    基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选、多选、排序、分页,以及编辑、导出、过滤(扩展)等等的功能。

    祈澈菇凉
  • [每天五分钟,备战架构师-8]数据库系统

    对于IT从业人员,一定听到过数据库的概念。顾名思义,数据库系统就是管理数据存储的软件。本篇就软件等级考试相关的数据库系统知识从整体上进行总结,方便大家复习。

    大江小浪
  • python定时任务:apscheduler的使用

    APScheduler基于Quartz的一个Python定时任务框架,实现了Quartz的所有功能,使用起来十分方便。提供了基于日期、固定时间间隔以及cront...

    KEVINGUO_CN
  • 第七章:游戏音效Audio接口简介Sound类及使用方法Music类以及使用方法

    1.LibGdx提供的音频方式,有三种,但是游戏中主要使用两种,Sound Music 2.枪声,按键声,这些短促,播放频率高的可以使用Sound实现。 3...

    Xiaolei123
  • 使用Rx Framework实现XAML中的物体拖动

    酝酿两年之后,微软发布了Reactive Extensions(Rx)库。Rx把事件驱动UI与LINQ、并发性和异步调用结合起来。

    yoyofx

扫码关注云+社区

领取腾讯云代金券