用django-pipeline為靜態文件添加hash

luxixing 發布于2019-08-06 13:15 / 2165人閱讀

摘要：用為靜態文件添加為什么需要靜態文件請看大公司里怎樣開發和部署前端代碼張云龍的答案。這樣避免了修改后用戶靜態文件不更新的尷尬，并且可以充分利用緩存。首先導入需要引用靜態文件的地方使用未的文件路徑

用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添加靜態路由將該小程序添加為開發小程序靜態文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/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