如何让jade模板在保存操作时在Visual Studio中自动编译？答案

【问题标题】：How can i get jade template to compile automatically in visual studio on save operation?如何让jade模板在保存操作时在Visual Studio中自动编译？
【发布时间】：2015-12-22 01:09:24
【问题描述】：

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

我已经安装了nodetools，web Essentials。语法高亮似乎有效，但创建一个 .jade 文件什么都不做。我认为某处缺少步骤。

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

【问题讨论】：

是的，grunt 或 gulp 任务来监视您的文件并在更改时进行编译是您所需要的。但是，如果您在应用程序中使用某些视图引擎，则根本不需要编译它。我的意思是我将 express 与玉视图引擎一起使用，它是按需编译的。
我正在使用 angularjs 不确定是否可以将其集成到管道中。

标签： node.js visual-studio pug grunt-contrib-jade

【解决方案1】：

Visual Studio 2015：摆弄了很多之后，我得到的答案如下：

安装节点
为 Visual Studio 安装 NodeTools
运行：npm install jam（安装玉）
运行：npm install -g grunt-cli（安装 grunt）
运行：npm install 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']);
};

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

【讨论】：

如何在项目打开时在 vscode 中绑定任务是他们的任何链接或教程吗？