Skip to content

Instantly share code, notes, and snippets.

@passy passy/jade.md
Last active Jul 26, 2018

Embed
What would you like to do?
Using Yeoman and Jade

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.

@mattarau

This comment has been minimized.

Copy link

commented Mar 24, 2013

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.

@jluna79

This comment has been minimized.

Copy link

commented Mar 31, 2014

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.
            }]
        }
    }
...
@cjcheshire

This comment has been minimized.

Copy link

commented May 2, 2014

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.