Django - Webassets

0 | 4750 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Django - Webassets" mit Ihrem Wissen!

Anzeige Hier werben

(Django-)Webassets

warum?

Webassets ist hilfreich um static-files in einem Django-Projekt zusammenzufassen und besser zu strukturieren. Die Organisation von statischen Dateien in großen Django-Web-Applikationen ist auf die herkömmliche Weise äußerst zeitintensiv und unübersichtlich. Hier schafft Django-Webassets Abhilfe.

was tut es?

Zum Beispiel lassen sich CSS und Javascript Files zusammenfassen und minimieren. Dadurch werden die Datenmengen und so die Performance der Applikation optimiert. Außerdem wird mit dieser Erweiterung die Verwaltung und Einbindung von static-files erheblich erleichtert, da ganze Bundles von files auf einmal eingebunden werden können.

Installieren

Wenn wir dieses Tool in unserem Django-Projekt verwenden möchten, müssen wir zunächst webassets auf unserem System installieren. Das geht am schnellsten mit dem Paketinstallationsprogramm PIP für Python.

 
sh
1
2
pip install webassets
pip install django-assets

Zuerst müssen wir unserer Django-App sagen, dass wir django-assets auch verwenden wollen. Dies geschieht in den Settings.

settings.py

 
Python
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
INSTALLED_APPS = (
    #...
    'django_assets',
)
#...

STATICFILES_FINDERS = (
    #...
    'django_assets.finders.AssetsFinder',
)

// So sollte es aussehen.

Dann müssen wir noch die urls.py modifizieren.

Zunächst müssen zwei Imports gemacht werden:

 
Python
1
2
from django.conf import settings
from django.conf.urls.static import static

Dann werden noch die urlpatterns erweitert:

 
Python
1
2
3
urlpatterns = patterns('',
    # ...
) + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

// Damit werden die static-Files auch im Entwicklerbetrieb bereitgestellt.

Als nächstes erstellen wir eine neue Python-Datei in unserer Haupt-Applikation:

assets.py

Dies sollte vom Dateipfad in etwa so aussehen: projectname/appname/assets.py

In dieser Datei werden wir unsere CSS und JS Bundles erstellen.

 
Python
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
from django_assets import Bundle, register

js = Bundle(
    'appname/js/script.js',
    'appname/js/another_script.js',

     filters='jsmin',
     output='assets/packed.js')

css = Bundle(
    'appname/css/style.css',
    'appname/css/ie_style.css',
    'appname/css/more_styles.css',

     filters='cssmin',
     output='assets/packed.css')


register('js_all', js)
register('css_all', css)

// was passiert hier?

  • Zunächst importieren wir Bundle und register, um diese Funktionen(?) verwenden zu können
  • Dann speichern wir unsere JS und CSS Dateien in Bundles
  • Diesen Bundles geben wir einen Comprimierungsfilter mit (z.B. 'cssmin')
  • Dann wird der Output festgelegt, der besagt, dass unsere komprimierten Files im Verzeichnis assets gespeichert werden soll
  • Zuletzt registrieren wir unsere Bundles unter einem passendem Namen, welchen wir später referieren können. (z.B. 'css_all')

HINWEIS:

Um die Komprimierung auch nutzen zu können müssen die packages "django-cssmin" und "django-jsmin" installiert werden. Dies geht wieder über PIP.

 
sh
1
2
pip install django-cssmin
pip install django-jsmin  

Nach dieser ganzen Vorbereitung kommt nun der Teil, an dem wir sehen werden, warum es sich gelohnt hat.

Verwenden

In unseren Templates können wir jetzt nämlich ganz einfach unsere erstellten Bundles verwenden.

Folgender Code wird uns unsere Bundles in einem Template einbinden:

beispiel_template.html

 
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<head>
//...

{% load assets %}
{% assets "css_all" %}
    <link rel="stylesheet" type="text/css" href="{{ ASSET_URL }}" />
{% endassets %}
{% assets "js_all" %}
    <script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}

</head>

Jetzt haben wir all unsere CSS/JS-Dateien mit nur wenigen Zeilen Code eingebunden und diese gleichzeitig komprimiert, um die Performance zu optimieren.

Fazit

Gerade in größeren Django-Projekten ist diese Erweiterung eigentlich unverzichtbar. Die Komprimierung und Einbindung mehrere Styles oder Javascripts erleichtert die Arbeit erheblich.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "Django - Webassets" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Django - Webassets" hier bearbeiten.

Mitarbeiter
  • Studiert Interaktive Mediensysteme in Augsburg und ist Werkstudent bei TEAM23 GmbH.