Get Liveload zur Arbeit mit Sails.js

Question

Ich bin neu in beiden Segeln und grunzen, so dass ich das Offensichtliche vermisse. Ich bin versuchen, meine Segel App im Browser automatisch zu aktualisieren, wenn Dateien ändern.

Ich starte die App mit sails lift und es läuft auf dem Standard-Port 1337.

Ich habe versucht, options: {livereload:true} zu meiner grunt-contrib-watch Konfiguration hinzuzufügen, aber soweit ich verstehe, muss ich irgendwie das Liveload JavaScript in meine Seite injizieren?

Ich habe versucht, grunt-contrib-connect mit der Option livereload zu verwenden, um das JavaScript zu injizieren, aber es scheint nur einen anderen Server zu starten. Wenn ich zum gestarteten Server navigiere (localhost:8000), sehe ich nur die Ordnerstruktur. Das Liveload-JavaScript wird jedoch injiziert.

Ich möchte das Liveload Chrome Plugin wenn möglich vermeiden.

Was ist der beste Weg, um das Liveload JavaScript in meine Sails App zu injizieren? Oder sollte ich einfach ein anderes Tool wie Browsersync verwenden?

Vielen Dank! :)

Answer 1

1. hinzufügen livereload Option Aufgaben/config/watch.js

module.exports = function(grunt) { 

    grunt.config.set('watch', { 
     api: { 

      // API files to watch: 
      files: ['api/**/*', '!**/node_modules/**'] 
     }, 
     assets: { 

      // Assets to watch: 
      files: ['assets/**/*', 'tasks/pipeline.js', '!**/node_modules/**'], 

      // When assets are changed: 
      tasks: ['syncAssets' , 'linkAssets'] 
     }, 
     // ADD THIS 
     options: { 
      livereload: true, 
     }, 
    }); 

    grunt.loadNpmTasks('grunt-contrib-watch'); 
}; 

2. livereload Skript zum Layout hinzufügen, irgendwo am Ende vor </body> Tag, standardmäßig views/layout.ejs:

<script src="http://localhost:35729/livereload.js"></script> 

Mit Ausnahme von localhost Sie IP- oder DNS-Name des Servers

Dies wird aktualisiert Seite, wenn eine Datei in api oder Vermögenswerte Ordner geändert wird, verwenden können.

Standardmäßig verwendet Ggrunt-contrib-watch Port. Sie können andere Port zeigen wie livereload: 8000

• Similar question, but not so detailed answer
• Ggrunt-contrib-watch docs

EDIT: Nun, ich weiß nicht wirklich, wenn diese völlig korrekt ist, aber sieht aus wie Sie Layout-Einstellungen außer Kraft setzen können in config/env/development.js. Fügen Sie so etwas wie:

module.exports = { 
    views: { 
     layout: 'dev' 
    } 
} 

Dann können Sie separate Layout-Datei erstellen views/dev.ejs wo Sie livereload Skript und andere Entwicklung params hinzufügen können. Sie können auch den Schlüssel livereload auf die gleiche Weise hinzufügen.

Answer 2

Nachdem ich einige Zeit mit sails/grunt versucht habe, installiere ich das Liveload Browser Plugin (http://livereload.com/extensions/) für .html, js und css und das Paket (https://www.npmjs.com/package/sails-hook-autoreload) für die Modelle und Controller.

Funktioniert wie ein Charme.