如何让 jade 模板在 visual studio 中自动编译保存操作？

Question

任何人都可以 post 一些关于如何获取 *.html 文件以编译为 *.jade 文件的基本步骤 Visual Studio 中的文件更改/保存操作吗？

我安装了nodetools，网络必备。语法突出显示似乎有效，但创建 .jade 文件没有任何作用。我认为某处缺少步骤。

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

Answer 1

Visual Studio 2015: 折腾了很久，得到的答案如下：

安装节点
为 visual studio
运行: npm install jade（安装jade）
运行: npm install -g grunt-cli（安装 grunt）
运行: npm 安装 bower
创建以下 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']);
};

打开任务资源管理器，然后确保 add/bind 任务 "watch" 打开项目。

如何让 jade 模板在 visual studio 中自动编译保存操作？

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

node.js

visual-studio

pug

grunt-contrib-jade