grunt-usemin: Definieren benutzerdefinierter Fluss

Question

Ich verwende grunt-usemin Plugin. Ich frage mich, wie es weiter geht.

Ich habe zwei Blöcke von Utimin Config in index.html.

<!-- build:js /scripts/scriptsmin.js --> 
<script src="/scripts/jquery.min.js"></script> 
... 
... 
<!-- endbuild --> 

<!-- build:js /scripts/scripts.js --> 
<script src="/scripts/app.js"></script> 
.... 
... 
<!-- endbuild --> 

Der erste Block, scriptsmin.js, ist eine Minifikationsdatei. Zweitens, scripts.js, enthält alle Dateien, die eine Verkleinerung benötigen.

Ich mag es.

1. Lauf minifier (uglifyjs) auf dem zweiten Block
2. concat ersten Block mit verkleinerten Version des zweiten (Schritt 1) ​​

Ist es möglich, wenn diese Blöcke in der gleichen Datei sind. Ich habe einen Abschnitt über flow gesehen. Konnte nicht folgen, ob ich den Block der Konfiguration benennen kann, und einzelnem Fluss auf jedem davon einstellen kann. Es spricht über den Fluss basierend auf dem Dateinamen (index.html). Wie soll ich den grunt useminPrepare Abschnitt schreiben.

Answer 1

Frage nur, warum Sie zwei separate Ziele für Ihre JavaScript-Dateien benötigen, vor allem, wenn sie & in eine Datei verkettet werden sollen. Was ich tun würde, ist nur noch die ein Skriptblock am Ende der Datei, wie folgt aus:

<!-- build:js /scripts/scripts.js --> 
<script src="/scripts/jquery.min.js"></script> 
<script src="/scripts/app.js"></script> 
<!-- endbuild --> 

Es ist einfacher, so zu verstehen, wenn Sie alle Ihre JS an einem Block ist und nicht zwei. Die useminPrepare ist eine Aufgabe, die im Grunde Ihre Gruntfile-Konfiguration aktualisiert, um Concat-, Cssmin- und Uglify-Ziele für Ihre Skripts und Stile einzuschließen. Führen Sie es einfach auf den Dateien aus, die Ihre Build-Kommentare enthalten.

useminPrepare: { 
    html: 'build/index.html' 
} 

usemin sollte nicht zu anders aussehen zu useminPrepare, aber was Sie möchten Sie vielleicht finden tun ist ‚Samen‘ useminPrepare mit einer Datei, wenn das die gleichen Bau blockiert, wie der Rest des HTML enthält. So dass die tatsächliche usemin Config noch ein paar Dateien dort haben könnte:

usemin: { 
    html: ['build/index.html', 'build/about.html', 'build/contact.html'] 
} 

Nach useminPrepare läuft, dann concat laufen, verunstalten und cssmin Aufgaben, schließlich laufen usemin. So haben Sie eine benutzerdefinierte Aufgabe wie folgt:

grunt.registerTask('build', ['useminPrepare', 'concat', 'uglify', 'cssmin', 'usemin']); 

Ich hoffe, dies hilft.

Answer 2

Ich hatte das gleiche Problem. Wenn Sie mit zwei Dateien statt mit einem zufrieden sind, können Sie eine Verzweigung von usemin here verwenden. Es ermöglicht einige neue Strömungen, nämlich

• Libs
• libs2min
• Leere
entfernen

Siehe full descriptions.So würde Ihr html sein:

<!-- build:libs2min /scripts/scriptsmin.js --> 
<script src="/scripts/jquery.js"></script> 
... 
... 
<!-- endbuild --> 

<!-- build:js /scripts/scripts.js --> 
<script src="/scripts/app.js"></script> 
.... 
... 
<!-- endbuild --> 

Nesting die Blöcke ist nicht wahrscheinlich eine gute Idee im Moment leider. Aber du könntest es ausprobieren. ändern Ihre package.json als so

Um die Gabel statt der regulären Grunzen-usemin zu installieren

"devDependencies": { 
    ... 
    "grunt-usemin": "Rauno56/grunt-usemin", 
    ... 
}, 

und halten ein Auge auf die wichtigsten Repo - vielleicht die Funktion davon ab, es zu nicht zu weit ist.