用django-pipeline为静态文件添加hash

luxixing 发布于2019-08-06 13:15 / 2157人阅读

摘要：用为静态文件添加为什么需要静态文件请看大公司里怎样开发和部署前端代码张云龙的答案。这样避免了修改后用户静态文件不更新的尴尬，并且可以充分利用缓存。首先导入需要引用静态文件的地方使用未的文件路径

用django-pipeline为静态文件添加hash 为什么需要hash静态文件？

请看大公司里怎样开发和部署前端代码？张云龙的答案。

这样，当静态文件有修改时，会很方便的拿到最新的修改版本，而未修改的静态文件则依然使用缓存。这样避免了修改后用户静态文件不更新的尴尬，并且可以充分利用缓存。

demo

django_pipeline_demo

安装

sudo mkdir /opt/projects
git clone https://github.com/duoduo369/django_pipeline_demo.git
cd django_pipeline_demo
ln -s $(pwd) /opt/projects
ln -s /opt/projects/django_pipeline_demo/deploy/nginx/django_pipeline.conf /etc/nginx/sites-enabled
pip install -r requirements.txt
python manage.py runserver 0.0.0.0:9888
nginx -s reload
vim /etc/hosts 添加 127.0.0.1:9888 django_pipline_demo.com

django的库pipeline

mako, django-mako, django-pipeline-demo

效果是这样的,以 django_pipeline_demo 为例。

先说最终用法

debug必须为False(上线本来就是False),如果为True则使用django默认查找静态文件的方式,不会使用pipeline。

python manage.py collectstatic

重启django项目

重点代码解释

settings.py的几个配置,
如何安装配置django-pipeline,请移步文档.

解释几个collect有关的配置

# python manage.py collectstatic 后文件会扔到STATIC_ROOT下面
STATIC_ROOT = "./statics"

# django的模板会从这些目录下查找
TEMPLATE_DIRS = (
    os.path.join(BASE_DIR, "templates"),
)

# 开发时css的路径，collectstatic会从这里查找然后丢到STATIC_ROOT下
# 使用pipeline后会在静态文件中添加hash码，例如css/index.css
# collectstatic后会变成 css/index.as1df14jah8dfh.css
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static_dev"),
)

templates/common/static_pipeline.html

这是用mako定义了一个url，以后静态文件使用这个url导入，就可以找到hash的版本了。

<%!
from django.contrib.staticfiles.storage import staticfiles_storage
%>

<%def name="url(file)"><%
try:
    url = staticfiles_storage.url(file)
except:
    url = file
%>${url}

index.html

首先导入/common/static_pipeline.html,需要引用静态文件的地方使用${static.url("未hash的文件路径")}

<%namespace name="static" file="/common/static_pipeline.html"/>
....
    
....

云服务器 GPU云服务器静态文件用什么服务器 vpc添加静态路由将该小程序添加为开发小程序静态文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61772.html

Webpack中hash的用法

摘要：在的配置项中，可能会见到这样的字符。的情况的可以指定。值是特定于整个构建过程的。。因此，以上两个值中更推荐的是。中的则和前面的一样，指定了结果的截取长度。的情况被引用的通过来得到带的文件。所以，这可能并不是我们想要的。在webpack的配置项中，可能会见到hash这样的字符。当存在hash配置的时候，webpack的输出将可以得到形如这样的文件： page1_bundle_54e8...

苏丹 2019-08-20 18:09 评论0 收藏0
webpack4初学习

webpack基于node，因此想要学习webpack首先要安装node。webpack4要安装node8.2以上版本。 1、安装webpack 为什么选择本地安装，主要是由于以后介绍热更新这一部分不会报错，如果全局安装热更新就会报错，以本部分为基础依次介绍，保证各部分不会出错。 mkdir webpack-test cd webpack-test npm init //初始化npm，都选择默认，...

Object 2019-08-23 14:51 评论0 收藏0
前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号

摘要：原理修改和文件通过对文件内容进行运算，生成一个文件的唯一字符串如果文件修改则号会发生变化替换中的文件名，生成一个带版本号的文件名方案现在网上的方案都是生成一个新的目录，里面包含了要发布的等文件。原理修改js和css文件通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名，生成一个带...

suosuopuo 2019-08-22 10:36 评论0 收藏0
webpack4搭建脚手架_04

摘要：入门和使用介绍这是的上的基本的介绍本质上，是一个现代应用程序的静态模块打包器。在处理应用程序时，它会在内部创建一个依赖图，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个。的文档新接手的项目，从轮子开始就自己搭建。 webpack4入门和使用 webpack介绍这是webpak的上的基本的介绍：本质上，webpack 是一个现代 JavaScript 应用程序的静态模...

JowayYoung 2019-08-23 12:26 评论0 收藏0
webpack4介绍与总结

摘要：随着承担地职责越来越大，模块化开发的需求越来越急迫。我们可以把当成是模块化标准的实现方案，但的功能不仅限于此。支持多种模块使用方式，包括的。下面介绍一下在工程中常用的。最后一个的输出就是我们最终要的结果。在文件有值的情况下，是必要的。由于web应用扩展地得极其迅猛，前端技术也是日新月异，前端的苦不是有多难学，而是我刚学完，这东西就被淘汰了（手动哭脸）。框架方面我们有vue、react...

yanbingyun1990 2019-08-23 10:42 评论0 收藏0