Grunt livereload avec l'application node.js

J'ai écrit une application dans Node.js (avec Express & socket.io) et je voudrais utiliser Grunt pour compiler mon côté client des trucs avec livereload tout en développant et en étant connecté à Node.js application. Comment puis-je faire cela? (De préférence sans courir Node.js application dans un autre port, et le client dans un autre port, en raison du cheminement et de la croix-domaine)

J'ai installé aussi Yeoman et c'est à l'aide de la boîte de grunt-contrib-livereload paquet, mais de ce que j'ai compris que c'est à l'aide de Node.js Connecter serveur pour servir de client-côté des fichiers, ainsi, être séparé de ma Node.js application..

Exemple de Gruntfile.js généré par 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'
]);

source d'informationauteur acoder

Ne sais pas si vous avez résolu cette question encore, mais je l'ai fait par l'ajout, à ma demande expresse comme un middleware attaché à la connexion.livereload.des options.middleware " option.

Cependant, rechargement automatique de code côté serveur ne fonctionne pas. Pour que vous pourriez mettre en œuvre un rechargement sympathique serveur à l'aide d'un simple nœud ./server.js', se connecter créer un middleware qui agit comme un proxy transparent pour votre serveur de développement, et d'appeler au sein de vos Gruntfile.js avant votre standard connecter/livereload serveur démarre.

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;

1

Ma réponse est à l'aide de Gulp que je suis plus familier avec, au lieu de Grogner, mais j'imagine que la même approche serait de travailler avec Grunt.

Voir mon référentiel (et un ancien) et mon autre réponse.

Ni à aucune extension de navigateur ni l'ajout d'un script de vos dossiers est nécessaire.

La solution est basée sur la gulp-livereload et connectez-livereload paquets de travailler ensemble. Tout d'abord, vous commencez votre live reload auditeuret la pipe en elle toute modification de fichier (changement * plus spécifiques node-glob pour écouter uniquement les fichiers spécifiques):
```
var gulpLivereload = require('gulp-livereload');

gulpLivereload.listen();

gulp.watch('*', function(file) {
  gulp.src(file.path)
    .pipe(gulpLivereload());
});
 
```
Deuxième, le serveur est configuré pour utiliser le auditeur en tant que middleware via connect-livereload:
```
var connect = require('connect');
var connectLivereload = require('connect-livereload');

connect()
  .use(connectLivereload())
  .use(connect.static(__dirname))
  .listen(8080);
 
```
Voir les paquets pour plus d'informations sur la façon dont ils travaillent en interne.

Dans le Gruntfile, supprimer connect:livereload et open de server tâche.

Ajouter le script suivant dans le fichier 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>

Vous devez vous connecter pour publier un commentaire.