Grunt compilant des fichiers Jade

Pour compléter la réponse ci-dessus

  jade: { compile: { options: { client: false, pretty: true }, files: [ { cwd: "app/views", src: "**/*.jade", dest: "build/templates", expand: true, ext: ".html" } ] } } 

Donc, si votre source est structurée de la manière suivante:

 app └── views └── main.jade └── user └── signup.jade └── preferences.jade 

grunt jade créera la structure suivante

 build └── templates └── main.html └── user └── signup.html └── preferences.html 

EDIT: Le grunt-contrib-jade est obsolète. Vous devriez plutôt utiliser grunt-contrib-pug . C'est exactement pareil, mais ils ont dû renommer jade to pug!

Juste au cas où quelqu'un en aurait besoin. Rien d'autre n'a été effectué. C'est comme ça que j'ai finalement travaillé pour moi.

J'utilise grunt.loadNpmTasks('grunt-contrib-pug'); Je ne sais pas si contrib-jade a été obsolète mais cette solution fonctionne pour moi. J'ai besoin du premier objet de fichier pour gérer uniquement l'index.jade et le 2ème pour traiter les modèles. Maintenant, si je ne le divise pas et que je pointe sur le répertoire du projet, le compilateur de jade se perd dans mon dossier de package npm, donc cela fonctionne beaucoup plus rapidement.

 pug: { compile: { options: { client: false, pretty: true, data: { debug: false } }, files: [ { 'dist/index.html': ['index.jade'] }, { src: "templates/*.jade", dest: "dist", expand: true, ext: ".html" } ] } } 

Je sais que c'est un ancien poste, mais je suis toujours revenu ici tout en essayant de résoudre un problème similaire. Je voulais générer plusieurs fichiers html à partir d'un seul fichier modèle jade à l'aide d'un for-loop. Il fallait donc un plus grand contrôle de l'objet 'fichiers'.

Les deux problèmes que j'ai rencontrés et finalement résolus ont été la définition du nom de fichier de sortie (un javascript object literal KEY) et de veiller à ce que les fonctions javascript en ligne soient exécutées immédiatement afin que les variables de boucle soient disponibles.

Voici mon code source complet avec des commentaires. J'espère que cela est utile pour quelqu'un d'autre qui se trouve dans cette publication.

Gruntfile.js:

 module.exports = function(grunt) { // Create basic grunt config (eg watch files) grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), watch: { grunt: { files: ['Gruntfile.js'] }, jade: { files: 'src/*.jade', tasks: ['jade'] } } }); // Load json to populate jade templates and build loop var json = grunt.file.readJSON('test.json'); for(var i = 0; i < json.length; i++) { var obj = json[i]; // For each json item create a new jade task with a custom 'target' name. // Because a custom target is provided don't nest options/data/file parameters // in another target like 'compile' as grunt wont't be able to find them // Make sure that functions are called using immediate invocation or the variables will be lost // http://stackoverflow.com/questions/939386/immediate-function-invocation-syntax grunt.config(['jade', obj.filename], { options: { // Pass data to the jade template data: (function(dest, src) { return { myJadeName: obj.myname, from: src, to: dest }; }()) // <-- nb using() for immediate invocation }, // Add files using custom function files: (function() { var files = {}; files['build/' + obj.filename + '.html'] = 'src/index.jade'; return files; }()) // <-- nb using () for immediate invocation }); } grunt.loadNpmTasks('grunt-contrib-jade'); grunt.loadNpmTasks('grunt-contrib-watch'); // Register all the jade tasks using top level 'jade' task // You can also run subtasks using the target name eg 'jade:cats' grunt.registerTask('default', ['jade', 'watch']); }; 

Src / index.jade:

 doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 #{myJadeName} - node template engine #container.col p. Jade is a terse and simple templating language with a strong focus on performance and powerful features. 

Test.json:

 [{ "id" : "1", "filename" : "cats", "tid" : "2016-01-01 23:35", "myname": "Cat Lady" }, { "id" : "2", "filename" : "dogs", "tid" : "2016-01-01 23:45", "myname": "Dog Man" }] 

Après avoir exécuté 'grout', la sortie devrait être:

 build/cats.html build/dogs.html