node.js - 我怎样才能让jade模板在保存操作时在Visual Studio中自动编译？

Question

有人可以发布一些有关如何在 Visual Studio 中进行文件更改/保存操作时将 *.html 文件编译为 *.jade 文件的基本步骤吗？

我已经安装了nodetools，web Essentials。语法突出显示似乎有效，但创建 .jade 文件没有任何作用。我认为某处缺少一步。

我必须在任务中使用类似 grunt-contrib-jade 的东西吗？

Answer 1

Visual Studio 2015:经过一番折腾后，我得到的答案如下:

1. 安装 Node
2. 安装 Visual Studio 的 NodeTools
3. 运行:npm install james(安装jade)
4. 运行:npm install -g grunt-cli(安装 grunt)
5. 运行:npm install Bower
6. 创建以下 package.json 文件

Package.json:如下

{
  "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) 创建以下 grunt.js 文件

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']);
};

打开任务资源管理器，然后确保将任务“watch”添加/绑定(bind)到打开的项目。