Как я могу получить шаблон Jade для автоматической компиляции в Visual Studio при операции сохранения?

Question

Может кто-нибудь опубликовать некоторые основные шаги о том, как получить файлы *.html для компиляции в файлы *.jade при операции изменения / сохранения файла в Visual Studio?

Я установил nodetools, веб-основы. Подсветка синтаксиса, кажется, работает, но создание файла.jade ничего не делает. Я думаю, что где-то пропущен шаг.

Должен ли я использовать что-то вроде grunt-contrib-jade с задачей?

Answer 1

Visual Studio 2015: после долгих раздумий я получил следующий ответ:

1. Установить узел
2. Установите NodeTools для визуальной студии
3. Выполнить: npm установить Jade (установить Jade)
4. Запустите: npm install -g grunt-cli (установить grunt)
5. Выполнить: npm установить беседку
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']);
};

Откройте Task Explorer, а затем убедитесь, что вы добавляете / привязываете задачу "watch" к открытому проекту.