Grunt livereload с приложением node.js

Question

Я написал приложение в Node.js (с помощью Express & socket.io) и Я хотел бы использовать Grunt для компиляции своих клиентских файлов с помощью функции «загрузка» при разработке и подключении к Приложение Node.js. Как я могу это сделать? (желательно, не запуская приложение Node.js в другом порту и клиенте в другом порту, из-за проблем с переходом и междоменными доменами)

Я установил также Yeoman, и он использует из коробки пакет grunt-contrib-livereload, но от того, что я понял, он использует сервер Node.js Connect для обслуживания на стороне клиента файлы, таким образом отделяется от моего приложения Node.js ..

Пример из Gruntfile.js генерируемой Yeoman:

var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet; 
var mountFolder = function (connect, dir) { 
    return connect.static(require('path').resolve(dir)); 
}; 

// ... cut some parts 
grunt.initConfig({ 
    watch: { 
     livereload: { 
      files: [ 
       '<%= yeoman.app %>/*/*.html', 
       '{.tmp,<%= yeoman.app %>}/styles/*.css', 
       '{.tmp,<%= yeoman.app %>}/scripts/*.js', 
       '<%= yeoman.app %>/images/*.{png,jpg,jpeg}' 
      ], 
      tasks: ['livereload'] 
     } 
     // ..cut some parts 
    }, 
    connect: { 
     livereload: { 
      options: { 
       port: 9000, 
       middleware: function (connect) { 
        return [ 
         lrSnippet, 
         mountFolder(connect, '.tmp'), 
         mountFolder(connect, 'app') 
        ]; 
       } 
      } 
     } 
    } 
    // ..cut some parts 
}); 

grunt.registerTask('server', [ 
    'clean:server', 
    'coffee:dist', 
    'compass:server', 
    'livereload-start', 
    'connect:livereload', 
    'open', 
    'watch' 
]); 

Answer 1

Не конечно, если вы еще решили этот вопрос, но я сделал это, добавив мое экспресс-приложение как middlewa re прикреплен к опции «connect.livereload.options.middleware».

Однако автоматическая перезагрузка серверного кода не работает. Для этого вы можете реализовать перезагружаемый сервер с помощью простого «узла ./server.js», создать промежуточное промежуточное программное обеспечение, которое будет действовать как прозрачный прокси-сервер для вашего сервера разработки и вызвать его в вашем файле Gruntfile.js перед вашим стандартным подключением/загрузкой сервер запускается.

connect: { 
    options: { 
     port: 9000, 
     // change this to '0.0.0.0' to access the server from outside 
     hostname: 'localhost' 
    }, 
    livereload: { 
     options: { 
      middleware: function (connect) { 
       return [ 
        lrSnippet, 
        mountFolder(connect, '.tmp'), 
        mountFolder(connect, 'app'), 
        require('./server') // your server packaged as a nodejs module 
       ]; 
      } 
     } 
    } 
} 

server.js:

var app = express(); 

... 
// Export your server object. 
module.exports = app; 

Answer 2

В Gruntfile, удалить connect:livereload и open из server задачи.

Добавить следующий скрипт в HTML-файл

<!-- livereload script --> 
<script type="text/javascript"> 
    document.write('<script src="http://' 
     + (location.host || 'localhost').split(':')[0] 
     + ':35729/livereload.js?snipver=1" type="text/javascript"><\/script>') 
</script> 

Answer 3

Мой ответ использует Gulp, что я больше знакомы с, вместо Grunt, но я полагаю, такой же подход будет работать с Grunt, а также.

См. my repository (и an older one) и my other answer.

Не требуется ни расширение браузера, ни добавление какого-либо скрипта в ваши файлы.

Решение основано на пакетах и connect-livereload, работающих вместе. Во-первых, вы начинаете свой живой релоад слушателя, и трубы в нее любые изменения файлов (изменение * к более специфичным node-glob слушать только определенные файлы):

 

var gulpLivereload = require('gulp-livereload'); 

gulpLivereload.listen(); 

gulp.watch('*', function(file) { 
    gulp.src(file.path) 
    .pipe(gulpLivereload()); 
}); 
 

Во-вторых, необходимо настроить сервер для использования слушатель, как промежуточный слой с помощью connect-livereload:

 

var connect = require('connect'); 
var connectLivereload = require('connect-livereload'); 

connect() 
    .use(connectLivereload()) 
    .use(connect.static(__dirname)) 
    .listen(8080); 
 

Смотрите пакеты для получения дополнительной информации о том, как они работают внутри.