grunt-usemin: definizione del flusso personalizzato

Question

Sto utilizzando il plug-in grunt-usemin. Mi chiedo come fare sotto.

Ho due blocchi di usemin 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 --> 

Primo blocco, scriptsmin.js, è file minificati. In secondo luogo, scripts.js, contiene tutti i file che necessitano di un minimo.

Mi piace.

1. run minifier (uglifyjs) sul secondo blocco
2. concat primo blocco con la versione minified di secondo (fase 1)

E 'possibile, se questi blocchi sono nello stesso file. Ho visto una sezione su flow. Non posso seguire se posso nominare il blocco di configurazione e impostare un flusso separato su ciascuno di essi. Parla del flusso in base al nome del file (index.html). Come dovrei scrivere la sezione useminPrepare grunt.

Answer 1

Basta chiedersi il motivo per cui sono necessari due target separati per i file JavaScript, in particolare se verranno ridimensionati & concatenati in un unico file. Quello che vorrei fare è solo avere il blocco di uno script alla fine del file, in questo modo:

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

E 'più facile da capire così, se tutto il vostro JS è a un isolato anziché due. Lo useminPrepare è un'attività che aggiorna sostanzialmente la configurazione di Gruntfile per includere concat, cssmin e obiettivi uglify per script e stili. Basta eseguirlo sui file in cui sono presenti i tuoi commenti di build, in questo modo.

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

usemin non deve guardare troppo diverso da useminPrepare, ma quello che si può trovare che si vuole fare è useminPrepare 'seme' con un file, se che contiene gli stessi blocchi di generazione, come il resto del codice HTML. Così il config usemin effettivo potrebbe avere un paio di più file in là:

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

Dopo useminPrepare corre, quindi eseguire il concat, uglify e compiti cssmin, poi finalmente correre usemin. Quindi hai un'attività personalizzata come questa:

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

Spero che questo aiuti.

Answer 2

Ho avuto lo stesso problema. Se sarai soddisfatto di due file invece di uno puoi usare un fork di usemin here. Permette pochi nuovi flussi, cioè

• librerie
• libs2min
• vuoto
• rimuovere

Vedi full descriptions.Quindi il tuo html sarebbe:

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

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

Annidare i blocchi non è probabilmente una buona idea in questo momento, purtroppo. Ma potresti provarlo.

Per installare la forcella al posto del normale grugnito-usemin modificare la package.json come modo

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

e tenere d'occhio sul repo principale - forse la funzione non è lontano dall'ottenere anche lì.