用django-pipeline為靜態(tài)文件添加hash

luxixing 發(fā)布于2019-08-06 13:15 / 2158人閱讀

摘要：用為靜態(tài)文件添加為什么需要靜態(tài)文件請(qǐng)看大公司里怎樣開發(fā)和部署前端代碼張?jiān)讫埖拇鸢浮＿@樣避免了修改后用戶靜態(tài)文件不更新的尷尬，并且可以充分利用緩存。首先導(dǎo)入需要引用靜態(tài)文件的地方使用未的文件路徑

用django-pipeline為靜態(tài)文件添加hash 為什么需要hash靜態(tài)文件？

請(qǐng)看大公司里怎樣開發(fā)和部署前端代碼？張?jiān)讫埖拇鸢浮?/p>

這樣，當(dāng)靜態(tài)文件有修改時(shí)，會(huì)很方便的拿到最新的修改版本，而未修改的靜態(tài)文件則依然使用緩存。這樣避免了修改后用戶靜態(tài)文件不更新的尷尬，并且可以充分利用緩存。

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默認(rèn)查找靜態(tài)文件的方式,不會(huì)使用pipeline。

python manage.py collectstatic

重啟django項(xiàng)目

重點(diǎn)代碼解釋

settings.py的幾個(gè)配置,
如何安裝配置django-pipeline,請(qǐng)移步文檔.

解釋幾個(gè)collect有關(guān)的配置

# python manage.py collectstatic 后文件會(huì)扔到STATIC_ROOT下面
STATIC_ROOT = "./statics"

# django的模板會(huì)從這些目錄下查找
TEMPLATE_DIRS = (
    os.path.join(BASE_DIR, "templates"),
)

# 開發(fā)時(shí)css的路徑，collectstatic會(huì)從這里查找然后丟到STATIC_ROOT下
# 使用pipeline后會(huì)在靜態(tài)文件中添加hash碼，例如css/index.css
# collectstatic后會(huì)變成 css/index.as1df14jah8dfh.css
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "static_dev"),
)

templates/common/static_pipeline.html

這是用mako定義了一個(gè)url，以后靜態(tài)文件使用這個(gè)url導(dǎo)入，就可以找到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

首先導(dǎo)入/common/static_pipeline.html,需要引用靜態(tài)文件的地方使用${static.url("未hash的文件路徑")}

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