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?

For the latest yeoman (1.0.0-x), there is an instruction on how to get this working: https://gist.github.com/kevva/5201657 Make sure you incorporate the changes as mentioned in the comments. I'm using 1.0.0-beta.4 and works for me! — maethorr, May 07 '13 at 12:26

score 14 · Accepted Answer · edited Mar 29 '14 at 03:29

14

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

edited Mar 29 '14 at 03:29

mjhm

16,497
10
44
55

answered Jan 09 '13 at 20:30

Sindre Sorhus

62,972
39
168
232

I thought about that. Just hoped for a cleaner solution. But at the moment i'll do. Thanks – asgoth Jan 09 '13 at 20:52
The 'original-server' task is running "clean" task, AFTER it has compiled our template - how do we solve this ? – Angelos Pikoulas Jan 21 '13 at 15:11
1

If it's not enough to put the jade task in front or after the `original-server`, you can just replace the `server` task with `grunt.registerTask('server', 'clean jade task task task');` and make sure all the original tasks from /tasks/yeoman.js are included. – Sindre Sorhus Jan 21 '13 at 15:16
1

@SindreSorhus link is dead – mcranston18 Feb 27 '14 at 19:51
@SindreSorhus it's dead – Ahmad Alfy Mar 12 '14 at 09:29

score 3 · Answer 2 · answered Jan 10 '13 at 08:58

3

make sure to add

  grunt.loadNpmTasks('grunt-jade');

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

answered Jan 10 '13 at 08:58

adrian

161
7

Of course... My grunt file works, only the yeoman integration did not. But @Sindre found a solution. – asgoth Jan 10 '13 at 10:00

score 1 · Answer 3 · answered Jul 04 '13 at 14:32

1

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

answered Jul 04 '13 at 14:32

chadoh

4,343
6
39
64

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

3 Answers3

Linked

Related