2015-09-24 19 views
1

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

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

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

+0

Да, задача ворчать или глотать, чтобы посмотреть ваши файлы и скомпилировать, когда они были изменены, это то, что вам нужно. Но если вы используете какой-либо механизм просмотра в своем приложении, вам совсем не нужно его компилировать. Я имею в виду, что я использую экспресс с движком jade view, и он компилируется по требованию. – Molda

+0

Я использую angularjs, не уверен, могу ли я интегрировать его в конвейер. –

ответ

1

Visual Studio 2015: После того, как возились вокруг много ответа у меня есть выглядит следующим образом:

  1. Установите узел
  2. Установку NodeTools для визуальной студии
  3. Run: НПЙ установить нефрит (установить нефрит)
  4. Run: НПМ установить -g черновую-консоли (установка хрюкать)
  5. Run: НПМ установить становой
  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']); 
}; 

Open Task Explorer, а затем убедитесь, что вы добавляете/сшивание задача «смотреть» для открытия проекта.