Grunt compiling Jade files

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?

javascript
node.js
gruntjs

Answer 1

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

Answer 2

Here's the magic config I needed to make it work:

{
  expand: true,
  src: "source/templates/*.jade"
  ext: ".html"
}