jade.md

Using Yeoman and Jade

Getting started

• Make sure you have yo installed: npm install -g yo
• Run: yo webapp
• Install grunt-contrib-jade: npm install grunt-contrib-jade --save-dev

Customization

When running yo webapp a Gruntfile.js will be generated in your project root. By default, we include a basic set of Grunt tasks but you are free to add more according to your needs. For more information on how to install and configure Grunt tasks, read the Getting started guide.

To get Jade working, we have to setup our Jade task. You can find more info and documentation for the Jade task here.

jade: {
    dist: {
        options: {
            pretty: true
        },
        files: [{
            expand: true,
            cwd: '<%= yeoman.app %>',
            dest: '.tmp',
            src: '*.jade',
            ext: '.html'
        }]
    }
}

The above example tells Jade to look for .jade files in the <%= yeoman.app %> folder and compile them into the .tmp folder. Since watch:livereload, useminPrepare and htmlmin are looking for your HTML files in <%= yeoman.app %> we have to change them. To do that, simply replace the references pointing to <% yeoman.app %>/*.html to .tmp/*.html.

We also have to add Jade to the watch task so that our Jade templates compiles on change. It should look something like this:

watch: {
    jade: {
        files: ['<% yeoman.app %>/*.jade'],
        tasks: ['jade']
    },
    livereload: {
        files: [
            '.tmp/*.html',
            '{.tmp,<%%= yeoman.app %>}/styles/{,*/}*.css',
            '{.tmp,<%%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}'
        ],
        tasks: ['livereload']
    }
},
useminPrepare: {
    html: '.tmp/index.html',
    options: {
        dest: '<%= yeoman.dist %>'
    }
},
htmlmin: {
    dist: {
        files: [{
            expand: true,
            cwd: '.tmp',
            src: '*.html',
            dest: '<%= yeoman.dist %>'
        }]
    }
}

Finally, change the server and build tasks to include the jade task.

grunt.registerTask('server', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'open', 'connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server',
        'coffee:dist',
        'compass:server',
        'jade',
        'livereload-start',
        'connect:livereload',
        'open',
        'watch'
    ]);
});

grunt.registerTask('build', [
    'clean:dist',
    'coffee',
    'compass:dist',
    'jade',
    'useminPrepare',
    'imagemin',
    'htmlmin',
    'concat',
    'cssmin',
    'uglify',
    'copy',
    'usemin'
]);

Replace the index.html in the app/ folder with an index.jade. You can convert the default index.html to .jade on html2jade.com. Then try running grunt server and you should be served a page with a 'Allo 'allo message.