How can i get jade template to compile automatically in visual studio on save operation?

Question

Could anyone post some basic steps on how to get *.html files to compile to *.jade files on file change / save operation in Visual Studio?

I have installed nodetools, web essentials. Syntax highlighting seems to work, but creating a .jade file does nothing. I think there is a missing step somewhere.

Do I have to use something like grunt-contrib-jade with a task?

Answer 1

Visual Studio 2015: After fiddling around a lot the answer i have is as follows:

1. Install node
2. Install NodeTools for visual studio
3. Run: npm install jade (install jade)
4. Run: npm install -g grunt-cli (install grunt)
5. Run: npm install bower
6. Create the below package.json file

Package.json : as follows

{
  "name": "myapp",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-uglify": "~0.5.0",
    "grunt-contrib-jade": "0.15.0",
    "grunt-contrib-watch": "0.6.1"  
  }
}

7) Create the following grunt.js file

module.exports = function (grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        jade: {
            compile: {
                options: {
                    data: {
                        debug: true,
                        timestamp: "<%= new Date().getTime() %>"
                    }
                },
                files: [{
                    expand: true,
                    src: '**/*.jade', 
                    ext : '.html'
                }]
            }
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'Scripts/bootstrap.js',
                dest: 'Scripts/build/bootstrap.min.js'
            }
        },
        watch: {
            jade: {
                files: '**/*.jade',
                tasks: ['jade:watch'],
                options: {
                    spawn: false
                }
            }
        }
    });



    grunt.event.on('watch', function (action, filepath) {
        if (filepath.indexOf('.jade') === -1) return;
        var file = {};
        var destfile = filepath.replace('.jade', '.html');
        file[destfile] = filepath
        grunt.config('jade.watch.files', file);
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    grunt.loadNpmTasks('grunt-contrib-jade');
    // Default task(s).
    grunt.registerTask('default', ['uglify']);
};

Open Task Explorer and then make sure you add/bind the task "watch" to project open.