Wie kann ich grunt-usemin informieren, Djangos statische Template-Tags zu ignorieren?

Question

Ich baue eine Django-App, die eine Angular-App mit einer Seite bietet.

Django dienen dem Angular der index.html, den folgenden usemin Skriptblock hat:

<!-- build:js scripts/scripts.js --> 
<script src="{% static "scripts/app.js" %}"></script> 
<script src="{% static "scripts/controllers/main.js" %}"></script> 
<script src="{% static "scripts/controllers/stats.js" %}"></script> 
<script src="{% static "scripts/directives/highchart.js" %}"></script> 
<!-- endbuild --> 

Usemin versucht zu finden "{% statisch "scripts/app.js" %}" auf dem Dateisystem und natürlich scheitert Denn was es wirklich zu finden versucht, ist "scripts/app.js".

Hat jemand einen Workaround dafür gesehen?

Answer 1

In Ordnung, ich denke, ich habe einen Workaround. Dies setzt voraus, dass die erstellte Datei auch auf die statische URL für die erstellten Assets zeigen soll.

Dazu müssen Sie eine STATIC_URL für Ihren Ansichtskontext definieren (anstatt src="{% static 'foo/bar.js' %}" zu verwenden, verwenden Sie src="{{STATIC_URL}}foo/bar.js"). Ich konnte {% static %} nicht arbeiten, ohne die grunt-usemin Quelle zu hacken.

So Ihr Beispiel mit diesem:

<!-- build:js {{STATIC_URL}}scripts/scripts.js --> 
<script src="{{STATIC_URL}}scripts/app.js"></script> 
<script src="{{STATIC_URL}}scripts/controllers/main.js"></script> 
<script src="{{STATIC_URL}}scripts/controllers/stats.js"></script> 
<script src="{{STATIC_URL}}scripts/directives/highchart.js"></script> 
<!-- endbuild --> 

zu Compiliert unten:

<script src="{{STATIC_URL}}scripts/scripts.js"></script> 

Um dies zu erreichen, musste ich die folgenden Grunzen Konfigurationen (in Gruntfile.js) hinzuzufügen:

Answer 2

(Ich fand diese Frage beim googlen für eine Lösung, also teile ich einfach die Lösung ich fand sie So, dass andere wie ich es finden können.)

Ich habe gerade ein Grunt-Plugin namens grunt-bridge entdeckt, das statische Dateien in einer HTML-Vorlage mit dem static-Tag umbrechen kann. Die Dokumentation ist nicht großartig, aber ich habe mir gedacht, wie ich sie für mein Projekt einsetzen kann.

Wenn Sie Skripte wie folgt aus:

<!-- build:js({.tmp,app}) /scripts/scripts.js --> 
    <script src="scripts/app.js"></script> 
    <script src="scripts/util/util.js"></script> 
    ... 

Und die letzte Ausgabe, die es zur Ausgabe etwas wie folgt aus:

<script src="{% static 'adjangoappname/scripts/94223d51.scripts.js' %}"></script> 

Installieren gruntbridge mit npm install grunt-bridge --save-dev und fügen Sie eine Config wie dies in der Grunzen .initConfig der Gruntfile.js:

bridge: { 
    distBaseHtml: { 
     options: { 
      pattern: '{% static \'adjangoappname{path}\' %}', 
      html: '<%= yeoman.minifiedDir %>/index.html', dest: '<%= yeoman.templateDir %>/index.html' 
     } 
    }, 
    distIndexHtml: { 
     options: { 
      pattern: '{% static \'adjangoappname{path}\' %}', 
      html: '<%= yeoman.minifiedDir %>/index.html', dest: '<%= yeoman.templateDir %>/index.html' 
     } 
    }, 
    // ... etc for each html file you want to modify 
}, 

Dabei ist <%= yeoman.minifiedDir %> das Ausgabeverzeichnis der endgültigen verkleinerten HTML-Dateien und <%= yeoman.minifiedDir %> das Zielvorlagenverzeichnis. Ersetzen Sie adjangoappname durch den Namen Ihrer Django-App oder eines anderen Verzeichnispräfixes, das Sie haben möchten.

Dann Grunzen-Brücke zuletzt in der registerTask Liste wie folgt hinzu:

grunt.registerTask('build', [ 
    //... 
    'htmlmin', 
    'bridge' 
]); 

(ich denke, es ist möglich, die Konfiguration kompakter zu machen, aber dies ist die erste Methode, die ich arbeitete entdeckt)