flask-assets使用介绍

作用：对css、js静态文件进行打包，打包成一个文件，然后去除文件里的换行、空行等进行压缩； 而且 Flask-Assets 还会使用特定的 HTTP Response Header, 让浏览器缓存这些文件, 只有在这些文件的内容被修改时, 才会再次下载

1、插件安装：pip install flask-assets; pip install cssmin; pip install jsmin

2、在py文件中进行打包对象的定义，前面的默认路径都是 /static，Bundel() 的构造器能够接受无限个文件名作为非关键字参数, 定义那些文件需要被打包, 这里主要打包本地 static 下的 CSS 和 JS 两种类型文件，filters是使用的过滤器类型，output是压缩后文件的存储位置，目录不存在可以自动创建

 1 #!/usr/bin/env python
 2 # -*- coding: utf-8 -*-
 3 # Created by miaoshuijian on 2017/7/12
 4
 5 from flask_assets import Bundle, Environment
 6
 7 # Create the Flask-Assets‘s instance
 8 assets_env = Environment()
 9 # Define the set for js and css file.
10
11 main_css = Bundle(
12     ‘media/css/bootstrap.min.css‘,
13     ‘media/css/bootstrap-responsive.min.css‘,
14     ‘media/css/font-awesome.min.css‘,
15     ‘media/css/style-metro.css‘,
16     filters=‘cssmin‘,
17     output=‘media/css/common.css‘)
18
19 # <link href="/static/" rel="stylesheet" type="text/css" media="screen"/>
20
21 main_css_screen = Bundle(
22     ‘media/css/jqvmap.css‘,
23     ‘media/css/jquery.easy-pie-chart.css‘,　　　　Bundle(‘css/layout.less‘,filters=‘less‘), # 对less文件使用less过滤器，其他文件使用cssmin过滤器
24     filters=‘cssmin‘,
25     output=‘media/css/common_screen.css‘)
26
27 main_js = Bundle(
28     ‘media/js/jquery-1.10.1.min.js‘,
29     ‘media/js/jquery.easy-pie-chart.js‘,
30     ‘media/js/jquery.sparkline.min.js‘,
31     ‘media/js/app.js‘,
32     ‘media/js/index.js‘,
33     filters=‘jsmin‘,
34     output=‘media/js/common.js‘)

3、在模板html文件中使用打包文件

 1 {% assets "main_css" %}
 2     <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
 3 {% endassets %}

　　{% assets "main_css_screen" %}
       <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
   {% endassets %}

 4 {% assets "main_js" %}  5 <script type="text/javascript" src="{{ ASSET_URL }}"></script>  6 {% endassets %}  7

4、注册打包文件

from packages.utils.assets import assets_env, main_css, main_js, main_css_screen

assets_env.init_app(APP)
assets_env.register(‘main_css‘, main_css)
assets_env.register(‘main_css_screen‘, main_css_screen)
assets_env.register(‘main_js‘, main_js)

5、在开发环境下不应该将 CSS/JS 文件打包, 因为我们可能会经常对这些文件进行修改, 所以需要设定在开发环境中不打包, 但生产环境中会自动进行打包

下面这个配置将控制是否打包css/js文件

    ASSETS_DEBUG = True

参考：1、http://blog.csdn.net/jmilk/article/details/53765082


　　　2、http://www.jianshu.com/p/2483777d858e