Compilazione HTML statica con partial utilizzando Grunt.js

Question

Ho cercato un qualcosa che mi permettesse di precompilare i siti web statici usando Grunt. Ha bisogno di avere partial, quindi posso includere cose come un comune header/footer attraverso le pagine.

Finora, ho trovato davvero solo Jade, che ha un plugin per grunt, e il plugin this per Grunt che compila i template di Dust.js in HTML statico. Non mi piace la sintassi di Jade, e il plugin Dust per Grunt è tutt'altro che ideale.

Esistono linguaggi HTML di template HTML statici con supporto Grunt/Gulp che non si discostano troppo dal normale HTML e sono ancora attivi?

Answer 1

Ho trovato questo plug-in con nome grunt-includes. Ho cercato per sempre una risposta alla tua domanda. Questo è il primo che ho visto che sembra facile da usare. Tutti gli altri sembrano forse hanno questa caratteristica ma fanno 20x altre cose in modo che sembrino lo strumento sbagliato per il lavoro.

L'unica cosa che mi manca è la possibilità di prefissare percorsi relativi. Sto parlando allo sviluppatore di modest che sta diventando un'opzione migliore.

UPDATE: C'è uno grunt-includes-replace che è quasi altrettanto semplice e può prefissare i percorsi relativi. IE: ti permette di passare in variabili.

Answer 2

Ho avuto qualche successo facendo proprio questo con il plugin grunt assemblare. Ho fatto un paio di vids quando ho iniziato ad usarlo:

http://www.youtube.com/watch?v=oRwL5Y7K0CM (5:43)

http://www.youtube.com/watch?v=R9Jj9ciA2wM (16:44)

Ecco il sito ufficiale:

https://github.com/assemble/assemble

Da quel sito puoi vedere come possono essere usati i partial; per esempio:

assemble: { 
    options: { 
    assets: 'assets', 
    partials: ['docs/includes/**/*.hbs'], 
    data: ['docs/data/**/*.{json,yml}'] 
    }, 
    pages: { 
    src: ['docs/*.hbs'], 
    dest: './' 
    } 
} 

Poi essenzialmente sei in grado di eseguire qualcosa di simile:

grunt assemble 

o per ulteriori controllo a grana fine è possibile eseguire un compito del target assemblare come:

grunt assemble:your_target 

Funziona bene per me. Richiede un po 'di curva di apprendimento e i documenti probabilmente miglioreranno man mano che continueranno a lavorare su di esso.

Answer 3

Io uso https://npmjs.org/package/grunt-dust per i modelli di polvere pre-compilazione con partial.

La parte rilevante della Gruntfile.js può essere simile a questa:

dust: { 
     defaults: { 
      files: { 
       'views/index.js': 'views/**/*.dust' 
      }, 
      options: { 
       wrapper: 'commonjs', 
       runtime: false, 
       wrapperOptions: { 
        returning: 'dust', 
        deps: { 
         dust: 'dustjs-linkedin', 
         dustHelpers: 'dustjs-helpers' 
        } 
       } 

      } 
     } 
    }, 

Questo metterà tutti i modelli di polvere compilati in un views/index.js.

Ci sono altri esempi e documenti più dettagliati a https://github.com/vtsvang/grunt-dust