Grunt Inline CSS e Javascript

Question

Versione corta:

c'è un modo, utilizzando Grunt, per includere CSS minified e JavaScript inline?

Per utilizzare la formattazione di usemin come esempio, mi piacerebbe vedere qualcosa di simile:

<!-- build:css inline --> 
<link rel="stylesheet" href="styles/foo.css"> 
<link rel="stylesheet" href="styles/bar.css"> 
... 
<!-- endbuild --> 

<!-- build:js inline --> 
<script src="js/foo.js"></script> 
<script src="js/bar.js"></script> 
... 
<!-- endbuild --> 

trasformato in questo qualcosa di simile:

<style>body { color: red; } /*css is here*/</style> 
<script>var foo = 1; bar = 'some javascript code is here'; ...</script> 

Versione lunga:

Quindi, sto lavorando a un tema Tumblr. Per poter utilizzare i file CSS o JS in un tema, devono essere caricati su Tumblr. L'unico modo per caricare è un piccolo modulo web scadente che spesso si blocca. Sto cercando di evitare questa interfaccia fino a quando io sono pronto a caricare il codice finale perché

1. non c'è modo per eliminare i file caricati, e
2. , mentre io sono in mezzo a sviluppo, questi passaggi aggiuntivi prendere troppo tempo

Per ottenere questo, ho copiando il mio CSS e JS in <style> e <script> tag nel mio file, quindi copiare il tutto in l'editor tema Tumblr. È più veloce, quindi sono contento di questo, ma copiare e incollare manualmente CSS e JS in un file sembra andare contro lo spirito di Grunt e l'automazione che fornisce. Idealmente, sarei in grado di eseguire grunt build e di sputare un file html con CSS e JS in linea, quindi posso semplicemente copiarlo nell'interfaccia di Tumblr (beh, idealmente, sarei in grado di copiarlo File HTML per Tumblr, ma Tumblr non fornisce FTP o SSH o alcuna interfaccia utile, quindi mi accontento di questo).

Sembrava che grunt-usemin potesse fornire la funzionalità che sto cercando, ma non sono stato in grado di farlo funzionare come ho descritto. Forse è fatto solo per mettere tutto in un file separato.

Sono aperto all'utilizzo di qualsiasi strumento Grunt se qualcuno ne conosce uno in grado di farlo.

Answer 1

L'ho usato prima: https://github.com/motherjones/grunt-html-smoosher. È molto semplice, basta fornire un file di input e un file di output; nessuna configurazione aggiuntiva, trova solo i file automaticamente e li allinea.

grunt.initConfig({ 
    smoosher: { 
    dist: { 
     files: { 
     'dest-index.html': 'source-index.html', 
     }, 
    }, 
    }, 
}); 

Spero che questo aiuti.

Answer 2

Basta fornire altri riferimenti che potrebbero essere utili:

Questo compito grant-inline fare css inline e JavaScript, ma è possibile farlo selettivo utilizzando il parametro _inline. C'è anche un compito simile grunt-inline-assests che fa la stessa cosa. Entrambi sono buoni per generare e-mail HTML.

Infine, lo scopo di this one è leggermente diverso; inserisce tutti i tuoi css e js come esterni in base a un tag nel tuo codice HTML. Questo può essere molto utile quando si sviluppano temi e front-end in cui si desidera avere js o css contenuti in molti piccoli file per una facile manutenzione.Sails-linker compito può essere usato per iniettare tutta CSS e JS, mentre in fase di sviluppo e uno dei inliner sopra può essere utilizzato per generare il file di produzione HTML finale con i CSS e JS minified e inline.