Using Yeoman and Jade

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.

How about moving the compiled .html from .tmp to the dist folder, like this:

jade: {
            // Move the compiled .html files from .tmp/ to dist/
            dist: {
                files: [{
                    expand: true,
                    cwd: '.tmp/',
                    src: ['**/*.html'], // Actual pattern(s) to match.
                    dest: '<%= yeoman.dist %>'
                }]
            },
            // Compile .jade files in app/views/ to .tmp/
            compile: {
                options: {
                    pretty: true,
                    data: {
                        debug: false
                    }
                },
                files: [{
                    expand: true, // Enable dynamic expansion.
                    cwd: '<%= yeoman.app %>/views', // Src matches are relative to this path.
                    src: '*.jade', // Actual pattern(s) to match.
                    dest: '.tmp/', // Destination path prefix.
                    ext: '.html' // Dest filepaths will have this extension.
                }]
            }
        },

This way you don't have to change watch:livereload, useminPrepare and htmlmin.

From here and here.

This was exactly what I was looking for :) Thanks!

I made a little change to the compile part so that every .jade file in the app is compiled and not only the ones in the views folder.

    jade: {
        // Move the compiled .html files from .tmp/ to dist/
        dist: {
            ...
        },
        // Compile ALL .jade files in app/ to .tmp/
        compile: {
            options: {
                pretty: true,
                data: {
                    debug: false
                }
            },
            files: [{
                expand: true, // Enable dynamic expansion.
                cwd: '<%= yeoman.app %>', // Src matches are relative to this path.
                src: '{,*/}*.jade', // Actual pattern(s) to match.
                dest: '.tmp/', // Destination path prefix.
                ext: '.html' // Dest filepaths will have this extension.
            }]
        }
    }
...

Big ask but is there a way to recompile a jade parent that has includes that have been updated?