Compilación de HTML estático con parciales usando Grunt.js

web pug

Question

He estado buscando por todas partes algo que me permita precompilar sitios web estáticos usando Grunt. Necesita tener parciales, por lo que puedo incluir cosas como un encabezado / pie de página común en las páginas.

Hasta ahora, solo he encontrado Jade , que tiene un complemento de gruñido, y this complemento para Grunt que compila las plantillas Dust.js a HTML estático. Realmente no me gusta la sintaxis de Jade, y el complemento Dust para Grunt es menos que ideal.

¿Hay algún lenguaje de plantillas de HTML estático con soporte de Grunt / Gulp que no se desvíe demasiado del HTML normal y aún esté activo?

Answer 1

Encontré este plugin llamado grunt-includes . He estado buscando una respuesta a tu pregunta para siempre. Este es el primero que he visto que parece fácil de usar. Es posible que todos los demás tengan esta función, pero hacen 20 veces más para que parezcan la herramienta incorrecta para el trabajo.

Lo único que me falta es la capacidad de prefijar rutas relativas. Estoy hablando con el desarrollador de modest que se está convirtiendo en una mejor opción.

ACTUALIZACIÓN : hay un grunt-includes-replace que es casi tan simple y puede prefijar rutas relativas. IE: te permite pasar en variables.

Answer 2

He tenido cierto éxito haciendo precisamente eso con Grunt Plugin Ensamblar. Hice un par de videos cuando comencé a usarlo:

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

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

Aquí está el sitio oficial:

https://github.com/assemble/assemble

Desde ese sitio se puede ver cómo se pueden usar los parciales; por ejemplo:

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

Entonces esencialmente eres capaz de ejecutar algo como:

grunt assemble

o para un control más detallado, puede ejecutar una tarea del objetivo de ensamblaje como:

grunt assemble:your_target

Está funcionando bien para mí. Requiere un poco de una curva de aprendizaje y los documentos probablemente mejorarán a medida que continúen trabajando en ello.

Answer 3

Utilizo https://npmjs.org/package/grunt-dust para precompilar plantillas de polvo con parciales.

La parte relevante de Gruntfile.js puede verse algo como esto:

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

Esto colocará todas las plantillas de polvo compiladas en un views/index.js .

Hay más ejemplos y documentos más detallados en https://github.com/vtsvang/grunt-dust