LandonSchropp LandonSchropp - 2 months ago 22
Node.js Question

Grunt compiling Jade files

I'm trying to configure my Gruntfile to compile all of my Jade files to individual HTML files. For example, if I have the following source folder:

source
└── templates
   ├── first.jade
   ├── second.jade
   └── third.jade


Then I would expect
grunt jade
to output:

build
└── templates
   ├── first.html
   ├── second.html
   └── third.html


Here's my Gruntfile using
grunt-contrib-jade
:

module.exports = function(grunt) {
grunt.initConfig({

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

grunt.loadNpmTasks("grunt-contrib-jade");
};


However, when I run the jade command I get the following errors:

Running "jade:compile" (jade) task
>> Source file "first.jade" not found.
>> Source file "second.jade" not found.
>> Source file "third.jade" not found.


What am I doing wrong?

Answer

To complete the above answer

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

So if your source is structured as so:

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

grunt jade will create the following structure

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

EDIT: The grunt-contrib-jadeis deprecated. You should rather use grunt-contrib-pug. It is exactly the same, but they had to rename jade to pug!

Comments