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

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

  1. <link rel="stylesheet" href = "include/style.css" type="text/css">
  2. <link rel="stylesheet" href = "include/demo_page.css" type="text/css">
  3. <link rel="stylesheet" href = "include/demo_table.css" type="text/css">
  4. <script type="text/javascript" src="include/CloudTesting.js"></script>
  5. <script src='include/jquery.min.js' type='text/javascript'></script>
  6. <script type='text/javascript' src='include/jquery.dataTables.js'></script>

压缩后会变成:

  1. <link rel="stylesheet" href="include/CACHE/css/31b7bf7183d6.css" type="text/css" />
  2. <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. 使用起来很方便:

  1. {% load compress %}
  2. {% compress css %}
  3. <link rel="stylesheet" href = "include/style.css" type="text/css">
  4. <link rel="stylesheet" href = "include/demo_page.css" type="text/css">
  5. <link rel="stylesheet" href = "include/demo_table.css" type="text/css">
  6. {% endcompress %}
  7. {% compress js %}
  8. <script type="text/javascript" src="include/CloudTesting.js"></script>
  9. <script src='include/jquery.min.js' type='text/javascript'></script>
  10. <script type='text/javascript' src='include/jquery.dataTables.js'></script>
  11. {% endcompress %}

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

注意:

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

转自: http://blog.csdn.net/quicktest/article/details/7995715?utm_source=tuicool

Django 的css和js压缩插件:django_compressor的更多相关文章

  1. HTML5全屏背景视频与 CSS 和 JS(插件或库)

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  2. mvc BundleConfig实现对Css、Js压缩打包加载

    Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下: nuget包管理--程序包管理控制台--Install-Package Microsoft.AspN ...

  3. Minify把CSS和JS压缩和削减

    Minify把CSS和JS压缩和削减(Minify:去掉空格回车符等),以及把多个CSS,JS文件整合到一个文件里.不要以为你的大带宽没有必要进行这类优化.使用它的理由更重要的是文件合并,而不是压缩, ...

  4. 使用gulp进行css、js压缩

    var gulp = require('gulp'); var cleanCSS = require('gulp-clean-css'); var concatCss = require('gulp- ...

  5. django 解决css,js文件304导致无法加载显示问题

    这种情况一般会在windows系统下出现 1.前台.后台如果无法加载css等样式.(建议通过此办法来解决) 这是因为你安装的某些IDE 或者其他更改了注册表导致的系统的注册表\HKEY_CLASSES ...

  6. gulp自动刷新和css、js压缩

    之前搭建过Grunt,但是用起来有点繁琐,后来有人跟我说gulp更多简单.所以今天又搭建一个gulp.在使用gulp前应该有nodeJs环境,安装完nodejs后,就可以开始gulp的搭建了. 先新建 ...

  7. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  8. 配置grunt进行css、js的检查、合并和压缩

    现在会进行代码的合并和压缩已成为前端人员的必备知识,那么现在来介绍一个grunt的工具.grunt是个风靡世界的工具,它的首页是  http://www.gruntjs.net 这是个中文网站,有文档 ...

  9. gulp之css,js压缩合并加密替换

    为了防止客户端的静态资源缓存,我们需要每次更新css或js的时候,通过md5或时间戳等方式重新命名静态资源.让客户端可以重新请求资源,而不是从缓存里取.然后html模板里的src也要做相应的修改.当然 ...

随机推荐

  1. 转:Oracle中merge into的使用

    最近项目上使用Oracle的Merge,所以找来一下资料学习了解. 该命令使用一条语句从一个或者多个数据源中完成对表的更新和插入数据. ORACLE 9i 中,使用此命令必须同时指定UPDATE 和I ...

  2. C#中async/await中的异常处理

    在同步编程中,一旦出现错误就会抛出异常,我们可以使用try-catch来捕捉异常,而未被捕获的异常则会不断向上传递,形成一个简单而统一的错误处理机制.不过对于异步编程来说,异常处理一直是件麻烦的事情, ...

  3. Eclipse-插件的安装之link文件方法

    1. 我的eclipse路径为eclipse_Home,在eclipse文件夹下建文件夹MyPlugins. 2. 下载插件并解压得到包含features和plugins的文件夹theXXX. 3.  ...

  4. Java-HashSet

    HashSet 的实现 public class HashSet<E> extends AbstractSet<E> implements Set<E>, Clon ...

  5. Yii2登陆添加验证码

    models中 LoginForm.php public $verifyCode; public function rules() { return [ …… ['verifyCode', 'capt ...

  6. 学习笔记-动态树Link-Cut-Tree

    --少年你有梦想吗? --少年你听说过安利吗? 安利一个集训队讲解:http://wenku.baidu.com/view/75906f160b4e767f5acfcedb 关于动态树问题,有多种方法 ...

  7. 【js】JSON.stringify 语法实例讲解

    语法:  JSON.stringify(value [, replacer] [, space]) value:是必选字段.就是你输入的对象,比如数组,类等. replacer:这个是可选的.它又分为 ...

  8. json 数据交换格式与java

    http://wiki.mbalib.com/wiki/数据交换 数据交换是指为了满足不同信息系统之间数据资源的共享需要,依据一定的原则,采取相应的技术,实现不同信息系统之间数据资源共享的过程. 数据 ...

  9. mongo复习

    $pop:-1移除数组的第一个元素,1移除最后一个元素eg: db.c.update({"name" : "toyota"},{$pop:{"titl ...

  10. fatl exception occurred异常/错误的一种可能情况

    如果,有可能是 java.lang.ClassLoader类内部出错,请自行检查