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

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

安装

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月前
|
监控 机器人 编译器
如何将python代码打包成exe文件---PyInstaller打包之神
PyInstaller可将Python程序打包为独立可执行文件,无需用户安装Python环境。它自动分析代码依赖,整合解释器、库及资源,支持一键生成exe,方便分发。使用pip安装后,通过简单命令即可完成打包,适合各类项目部署。
899 68
|
5月前
|
API 语音技术 开发者
Python 项目打包,并上传到 PyPI,分享项目
本文介绍了如何使用 Poetry 打包并发布一个 Python 项目至 PyPI。内容包括:项目创建、配置 `pyproject.toml` 文件、构建软件包、上传至 PyPI、安装与使用。通过实例 iGTTS 展示了从开发到发布的完整流程,帮助开发者快速分享自己的 Python 工具。
|
5月前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
9月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1422 58
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
3723 1
|
9月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
9月前
|
人工智能 Linux C++
即开即用,封装 Flask 项目为 exe 文件实操步骤
即开即用,封装 Flask 项目为 exe 文件实操步骤
|
10月前
|
Shell 开发者 Docker
Python文件打包:一站式指南
本文深入探讨Python文件打包的各种方法,从基础的zip和tar工具到高级的setuptools、PyInstaller、cx_Freeze等,涵盖Docker镜像、虚拟环境及自包含可执行文件的打包方式。通过示例代码与详细解析,帮助开发者根据项目需求选择合适的打包方案,提升代码分发与部署效率。内容全面,适合各水平读者学习参考。
1242 7
|
测试技术 Python
【03】做一个精美的打飞机小游戏,规划游戏项目目录-分门别类所有的资源-库-类-逻辑-打包为可玩的exe-练习python打包为可执行exe-优雅草卓伊凡-持续更新-分享源代码和游戏包供游玩-1.0.2版本
【03】做一个精美的打飞机小游戏,规划游戏项目目录-分门别类所有的资源-库-类-逻辑-打包为可玩的exe-练习python打包为可执行exe-优雅草卓伊凡-持续更新-分享源代码和游戏包供游玩-1.0.2版本
654 31
【03】做一个精美的打飞机小游戏,规划游戏项目目录-分门别类所有的资源-库-类-逻辑-打包为可玩的exe-练习python打包为可执行exe-优雅草卓伊凡-持续更新-分享源代码和游戏包供游玩-1.0.2版本
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
548 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡