Python:Flask-Assets打包js和css文件

简介: Python:Flask-Assets打包js和css文件


Flask-Assets 基于 webassets,个人感觉是Python版的webpack

安装

pip install Flask-Assets

使用示例

目录结构

.
├── __init__.py
├── run.py                     # 入口文件
├── static
│   ├── css
│   │   ├── common-1.css
│   │   ├── common-2.css
│   │   └── common.css        # 打包后的css文件
│   └── js
│       ├── common-1.js
│       ├── common-2.js
│       └── common.js         # 打包后的js文件
└── templates
    └── index.html

run.py

# -*- coding: utf-8 -*-
from flask import Flask, render_template
from flask_assets import Environment, Bundle
app = Flask(__name__)
# 调试环境不打包
app.config['ASSETS_DEBUG'] = True
# 打包配置
assets_env = Environment(app)
common_js = Bundle(
    'js/common-1.js',
    'js/common-2.js',
    filters='jsmin',
    output='js/common.js')
common_css = Bundle(
    'css/common-1.css',
    'css/common-2.css',
    filters='cssmin',
    output='css/common.css')
# 注册打包文件
assets_env.register('common_js', common_js)
assets_env.register('common_css', common_css)
# 路由
@app.route('/')
def hello_world():
    return render_template('index.html')
if __name__ == '__main__':
    app.run(debug=True)

static/css/common-1.css

.box-1{
    color: red;
}

static/css/common-2.css

.box-2{
    color: grey;
}

static/js/common-1.js

function foo1() {
}

static/js/common-2.js

function foo2() {
}

templates/index.html

{% assets "common_js" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
{% assets "common_css" %}
    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
{% endassets %}

输出

http://127.0.0.1:5000/


ASSETS_DEBUG=True

<script type="text/javascript" src="/static/js/common-1.js"></script>
<script type="text/javascript" src="/static/js/common-2.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/common-1.css" />
<link rel="stylesheet" type="text/css" href="/static/css/common-2.css" />

ASSETS_DEBUG=False

<script type="text/javascript" src="/static/js/common.js?207d589d"></script>
<link rel="stylesheet" type="text/css" href="/static/css/common.css?30e0ca9e" />

/static/css/common.css

.box-1{color:red}.box-2{color:grey}

/static/js/common.js

function foo1(){}
function foo2(){}

参考

flask assets压缩静态文件(flask 111)

相关文章
|
4天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
25 0
|
4天前
|
API 数据库 数据安全/隐私保护
Flask框架在Python面试中的应用与实战
【4月更文挑战第18天】Django REST framework (DRF) 是用于构建Web API的强力工具,尤其适合Django应用。本文深入讨论DRF面试常见问题,包括视图、序列化、路由、权限控制、分页过滤排序及错误处理。同时,强调了易错点如序列化器验证、权限认证配置、API版本管理、性能优化和响应格式统一,并提供实战代码示例。了解这些知识点有助于在Python面试中展现优秀的Web服务开发能力。
29 1
|
4天前
|
JavaScript 前端开发 网络安全
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
【网络安全 | 信息收集】JS文件信息收集工具LinkFinder安装使用教程
16 4
|
4天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
13 3
|
4天前
|
存储 缓存 监控
利用Python和Flask构建RESTful API的实战指南
在当今的软件开发中,RESTful API已成为前后端分离架构中的核心组件。本文将带你走进实战,通过Python的Flask框架,一步步构建出高效、安全的RESTful API。我们将从项目初始化、路由设置、数据验证、错误处理到API文档生成,全方位地探讨如何构建RESTful API,并给出一些实用的最佳实践和优化建议。
|
4天前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
6 0
|
4天前
|
JavaScript 前端开发 开发者
.js 文件和 .mjs 文件的区别
.js 文件和 .mjs 文件的区别
19 0
|
4天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
13 3
|
4天前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
27 0
|
4天前
|
Rust JavaScript 安全
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀
🚀JS使用Wasm为你的文件MD5计算装上火箭引擎🚀