Grunt livereload z aplikacją node.js

Question

Napisałem aplikację w Node.js (z Express & socket.io) i Chciałbym użyć Grunta do kompilowania moich materiałów po stronie klienta podczas livereload podczas tworzenia i połączenia z Aplikacja Node.js. Jak mogę to zrobić? (Najlepiej bez uruchamiania aplikacji Node.js w innym porcie i kliencie w innym porcie, ze względu na problemy ze śledzeniem i w wielu domenach)

Zainstalowałem również program Yeoman i korzystam z pakietu out-box-contrib-livereload, ale z tego co zrozumiałem to za pomocą serwera node.js Podłącz do serwowania plików po stronie klienta, a tym samym są oddzielone od mojego wniosku node.js ..

przykład od Gruntfile.js generowanego przez 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

Nie na pewno, jeśli rozwiązałeś to pytanie, ale zrobiłem to, dodając moją wyraźną aplikację jako middlewa ponownie dołączone do opcji "connect.livereload.options.middleware".

Jednak automatyczne ponowne ładowanie kodu po stronie serwera nie działa. Aby to zrobić, możesz zaimplementować przyjazny dla ładowania serwer za pomocą prostego "węzła ./server.js", utworzyć oprogramowanie pośredniczące do komunikacji, które będzie działać jako przezroczyste proxy dla serwera programistycznego, i wywołać je w pliku Gruntfile.js przed standardowym połączeniem/livereload uruchamia się serwer.

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

W Gruntfile, usunąć connect:livereload i open z server zadania.

Dodaj następujący skrypt w pliku 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

Moja odpowiedź korzysta Gulp że jestem bardziej zaznajomieni z, zamiast Grunt, ale wyobrażam sobie to samo podejście będzie działać z Grunt również.

Zobacz my repository (i an older one) i my other answer.

Nie jest wymagane żadne rozszerzenie przeglądarki ani dodawanie skryptu do plików.

Rozwiązanie jest oparte na pakietach współpracujących ze sobą: gulp-livereload i connect-livereload. Po pierwsze, należy rozpocząć żywo reload słuchacza i rurę do niego żadnych zmian plików (zmiana * jakichkolwiek bardziej szczegółowych node-glob słuchać tylko określonych plików):

 

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

gulpLivereload.listen(); 

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

drugie, można skonfigurować serwer, aby użyć słuchacz jako warstwy pośredniej poprzez connect-livereload:

 

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

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

Zobacz pakiety uzyskać więcej informacji o tym, jak one działają wewnętrznie.