Django 的css和js压缩插件:django_compressor

news/2024/7/8 6:20:36

Django 的css和js压缩插件:django_compressor

作者:Wally Yu


今天尝试了django_conpressor,一个在django框架中压缩css和js的插件,灰常有用

我把它加载在我的base的HTML template中,原来未经压缩的css和js是:

<link rel="stylesheet" href = "include/style.css" type="text/css">	
<link rel="stylesheet" href = "include/demo_page.css" type="text/css">
<link rel="stylesheet" href = "include/demo_table.css" type="text/css">


<script type="text/javascript" src="include/CloudTesting.js"></script>
<script src='include/jquery.min.js' type='text/javascript'></script> 
<script type='text/javascript' src='include/jquery.dataTables.js'></script>

压缩后会变成:
<link rel="stylesheet" href="include/CACHE/css/31b7bf7183d6.css" type="text/css" />
<script type="text/javascript" src="include/CACHE/js/3b54f0a1ee64.js"></script>

具体的做法:

详细的参见官方说明:http://django_compressor.readthedocs.org/en/latest/quickstart/

自己整理的关键步骤:

1. 安装:

pip install django_compressor
2. 添加到setting.py中:
INSTALLED_APPS = (
    # other apps
    "compressor",
)
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    # other finders..
    'compressor.finders.CompressorFinder',
)
3. 在settings.朋友中加入一些必要的配置:

COMPRESS_ROOT = 'Templates/include/'
COMPRESS_URL = 'include/'
COMPRESS_ENABLED = True

4. 使用起来很方便:

{% load compress %}
{% compress css %}
<link rel="stylesheet" href = "include/style.css" type="text/css">	
<link rel="stylesheet" href = "include/demo_page.css" type="text/css">
<link rel="stylesheet" href = "include/demo_table.css" type="text/css">
{% endcompress %}
{% compress js %}
<script type="text/javascript" src="include/CloudTesting.js"></script>
<script src='include/jquery.min.js' type='text/javascript'></script> 
<script type='text/javascript' src='include/jquery.dataTables.js'></script>
{% endcompress %}

一切搞定了,运行起来就是压缩后的效果了

注意:

COMPRESS_URL一定要以“/”结尾,否则会报“django.core.exceptions.ImproperlyConfigured: URL settings (e.g. COMPRESS_URL) mu
st have a trailing slash”这样的错




http://www.niftyadmin.cn/n/3649161.html

相关文章

使用Gallery

画廊功能&#xff0c;在实际的开发中使用到的地方还是挺多的&#xff01; 1.重写的适配器&#xff1a; [java] view plaincopyprint?public class GalAdapter extends BaseAdapter { private Context context; private List<Integer> list; pub…

DrawerLayout和Navigation实现侧滑菜单

DrawerLayout 1.以android.support.v4.widget.DrawerLayout为根控件&#xff0c;导入: compile com.android.support:design:24.2.1 2.Drawerlayout下包裹两个控件&#xff0c;第一个是内容控件&#xff0c;第二个是侧滑控件&#xff0c;使用android:layout_gravity来指定它的滑…

nuxt.js 全局 js_如何在Nuxt.js应用程序中实现身份验证

nuxt.js 全局 jsIn this tutorial, you’ll implement authentication in a Nuxt.js app using the Auth module. For the purpose of this tutorial we’ll be using JWT for authentication. 在本教程中&#xff0c;您将使用Auth模块在Nuxt.js应用中实现身份Auth 。 就本教程…

Drawerlayout和ToolBar进行整合

首先可以看一下效果 \ 上一篇文章我们使用的是Drawerlayout和Naviagtion实现了侧滑的效果,大家可以看下http://blog.csdn.net/qq_24675479/article/details/78743924。这个项目是基于上个项目来实现的 第一步&#xff1a;我们定义一下样式,因为我们默认的Toolbar标题和图标是…

vue使用jwt加密_如何使用Vue和Node构建轻量级发票应用程序:JWT身份验证和发送发票

vue使用jwt加密介绍 (Introduction) In the previous parts of the series, we looked at how to create the User Interface of our Invoicing Application that allowed users to create and view existing invoices. In this final part of the series, you will set up per…

TabLayout、ViewPager、fragment实现可滑动的顶部菜单

首先看下效果 第一步&#xff1a;主布局 <LinearLayoutandroid:layout_width"wrap_content"android:layout_height"wrap_content"android:orientation"vertical"><android.support.v7.widget.Toolbarandroid:id"id/tool_bar"…

node.js运行js_如何使用Node.js创建和运行计划的作业

node.js运行js介绍 (Introduction) Ever wanted to do specific things on your application server at certain times without having to manually run them yourself? This is where scheduled tasks come in handy. 是否曾经想过在特定时间在应用程序服务器上执行特定操作…

正确地做事与做正确的事同样重要

正确地做事与做正确的事同样重要一位软件工程师的6年总结作者&#xff1a;成晓旭http://blog.csdn.net/cxxsoft(声明&#xff1a;欢迎转载&#xff0c;请保证文章的完整性)“又是一年毕业时”&#xff0c;看到一批批学子离开人生的象牙塔&#xff0c;走上各自的工作岗位&#x…