Используйте grunt с браузером-обновлением

Question

Я сейчас пользуюсь browser-refresh перезапускать мой сервер узлов каждый раз, когда я изменяю файл моего сервера. Я хочу пойти дальше и сделать так, чтобы мой браузер обновлялся / перезагружался каждый раз, когда я вносил изменения в файл HTML. Я использую руль для клиента, поэтому у меня есть .hbs файлы в моем views каталог. я думал browser-refresh должен был также обновить браузер, но он не работает для меня.

За gruntУ меня установлены следующие задачи:

grunt.loadNpmTasks('grunt-express-server');
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-express-runner');

Я не думаю, что мне нужно все это, но я хочу найти то, что работает. Я могу перезапустить свой сервер с grunt-exec, но у меня уже есть псевдоним для browser-refreshтак что мне это не нужно.

Я должен также отметить, что в моем app.js файл сервера, я использую app.use('/', routes); где var routes = require('./routes/index');, Итак, когда мое приложение загружается (используя node app.js), он идет прямо к http://localhost:3000/users/login.

Заранее спасибо.

Answer 1

Использование grunt-contrib-watch и установка для параметра Live reload значения true, активирует перезагрузки в реальном времени и автоматическое восстановление grunt.

Например, в вашем gruntfile.js:

watch: {
  css: {
    files: '**/*.sass',
    tasks: ['sass'],
    options: {
      livereload: true,
    },
  },
},

Для перестройки вашего сайта (с помощью плагина grunt-contrib-watch) просто введите

grunt watch

Чтобы автоматически перестроить свой веб-сайт на основе изменений, посмотрите на пример использования grunt watch Команда ниже:

gruntfile.js

module.exports = function (grunt) {

  grunt.initConfig({

    exec: {
      server: 'node server'
    },

    // Other JS tasks here
    // ...


    watch: {
      css: {
        files: ['scss/**/*.scss'],
        tasks: ['sass'],
        options: {
          spawn: false
        }
      },

      javascript: {
        files: ['js/*.js'],
        tasks: ['uglify']
      },

      options: {
        livereload: true,
      },

    },

  });

  grunt.registerTask('server', ['exec:server']);

  // Minify JS and create CSS files
  grunt.registerTask('build', ['uglify', 'sass']);

  // Do what you expect the default task to do
  grunt.registerTask('default', ['build', 'exec:server']);
};

Более подробная информация здесь: https://github.com/gruntjs/grunt-contrib-watch/blob/master/docs/watch-examples.md#enabling-live-reload-in-your-html