Statische HTML-Kompilierung mit Partials unter Verwendung von Grunt.js

Question

Ich habe überall nach etwas gesucht, das statische Websites mit Grunt vorkompilieren kann. Es muss Teiltöne haben, sodass ich Dinge wie eine gemeinsame Kopf-/Fußzeile über die Seiten einfügen kann.

Bisher habe ich nur wirklich gefunden Jade, die ein Grunt-Plugin hat, und this Plugin für Grunt, die Dust.js Vorlagen zu statischen HTML kompiliert. Ich mag Jades Syntax nicht wirklich und das Dust-Plugin für Grunt ist weniger als ideal.

Gibt es statische HTML-Templating-Sprachen mit Grunt/Gulp-Unterstützung, die nicht zu sehr von normalem HTML abweichen und immer noch aktiv sind?

Answer 1

Ich fand dieses Plugin mit dem Namen grunt-includes. Ich habe für immer eine Antwort auf deine Frage gesucht. Dies ist das erste, das ich gesehen habe, das einfach zu benutzen scheint. Alle anderen scheinen vielleicht haben diese Funktion aber 20x andere Dinge, so dass sie wie das falsche Werkzeug für den Job scheinen.

Die eine Sache, die mir fehlt, ist die Fähigkeit, relative Pfade voranzutreiben. Ich spreche mit dem Entwickler von modest, die eine bessere Option wird.

UPDATE: Es gibt eine grunt-includes-replace, die fast so einfach ist und relative Pfade voranstellen kann. IE: Sie können Variablen übergeben.

Answer 2

Ich hatte gerade Erfolg mit dem Grunt Plugin Assemble. Ich machte ein paar vids, wenn ich zum ersten Mal begann es zu benutzen:

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

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

Hier ist die offizielle Website:

https://github.com/assemble/assemble

Von dieser Seite können Sie sehen, wie Partials verwendet werden können; zum Beispiel:

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

Dann Wesentlichen sind Sie in der Lage so etwas wie laufen:

grunt assemble:your_target 

:

grunt assemble 

oder für weitere feinkörnige Kontrolle Sie eine Aufgabe des zusammenbauen Ziel wie ausführen kann

Es funktioniert gut für mich. Es erfordert ein wenig Lernkurve und die Dokumente werden sich wahrscheinlich verbessern, wenn sie weiter daran arbeiten.

Answer 3

Ich verwende https://npmjs.org/package/grunt-dust zum Vorkompilieren von Staubvorlagen mit Teilbildern.

Der entsprechende Teil des Gruntfile.js kann wie folgt aussehen:

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

      } 
     } 
    }, 

Dies wird in einem views/index.js alle der kompilierten Staub Vorlagen setzen.

Es gibt weitere Beispiele und ausführlichere Dokumente bei https://github.com/vtsvang/grunt-dust