Integrating Jade in Yeoman's server/watch/reload tasks

Question

I've been playing around with Yeoman & Jade. I've created a small test app via yeoman init angular (it's an angular app, but that's not the point here)...

When I enter yeoman server at the command line, it will:

• compile coffeescript & compass files
• start a server
• start a browser
• watch & reload coffeescript & compass changes in the browser

Which is a great feature of Yeoman!

Now I want the same feature with Jade. So I installed grunt-jade via npm install grunt-jade and added the following config in GruntFile.js to compile the jade templates:

   jade: {
      html: {
        src: ['app/views/*.jade'],
        dest: 'app/views',
        options: {
          client: false
        }
      }
    },

I was able to integrate the jade task in Yeoman's watch & reload tasks by adding the following config in the watch task:

  watch: {
     ...
     jade: {
       files: 'app/views/*.jade',
       tasks: 'jade reload'
     },
     ...
  }

And all works wonderfully well... except that the initial compile does not occur unless I add the jade task to the command:

yeoman jade server

Our butler doesn't like this nice girl, because he won't let her integrate with his server task :) And that is annoying, since yeoman server will compile only coffeescript & compass files.

Is there any way how I could add the jade task to the default execution of yeoman server?

Answer 1

We created a guide on how to integrate Jade with Yeoman: Using Yeoman and Jade

Answer 2

make sure to add

  grunt.loadNpmTasks('grunt-jade');

on top of your gruntfile, otherwise yeoman doesn't know how to handle the "jade" task

Answer 3

There's an excellent guide to using Yeoman 1.0 and Jade together at https://gist.github.com/passy/5229305