Warum sagt die Grunt-Watch-Task, dass sie Dateien/Verzeichnisse beobachtet, die ich in der Konfiguration nicht angegeben habe?

Question

Ich habe folgende Gruntfile.js:

module.exports = function (grunt) { 

    "use strict"; 

    grunt.initConfig({ 
     watch: { 
      options: { 
       livereload: true 
      }, 
      css: { 
       files: ["app.styles.css"] 
      }, 
      js: { 
       files: ["app/**/*.js"] 
      }, 
      html: { 
       files: ["index.html", "app/**/*.html"] 
      } 
     }, 
     connect: { 
      server: { 
       options: { 
        port: 9000, 
        hostname: "*", 
        livereload: true, 
        open: true 
       } 
      } 
     }, 
     jshint: { 
      files: ["app/**/*.js"] 
     } 
    }); 

    grunt.loadNpmTasks("grunt-contrib-jshint"); 
    grunt.loadNpmTasks("grunt-contrib-watch"); 
    grunt.loadNpmTasks("grunt-contrib-connect"); 

    grunt.registerTask("default", ["connect","watch"]); 

}; 

Ich habe die folgende Struktur in meiner Anwendung:

Beachten Sie, dass App, bower_components, CSS und Bilder alle auf dem gleichen Niveau sind .

Wenn ich die Aufgabe grunt --verbose ausführen sehe ich, dass viele weitere Dateien/Verzeichnisse in meiner Anwendung überwacht werden, einschließlich der bower_components und node_modules Verzeichnisse.

Aber ich habe nicht grunzen angegeben eine dieser Dateien/Verzeichnisse zu beobachten. Außerdem lädt Grunt die Anwendung nicht neu, wenn ich die in der Konfiguration angegebene CSS-Datei (app.styles.css) ändere. Ich dachte, dass Grunt nur die Dateien beobachtete, die ich in Gruntfile.js angegeben habe, was ich will. Warum beobachtet Grunt diese zusätzlichen Dateien/Verzeichnisse und schaut auch nicht auf meine app.styles.css-Datei?

Answer 1

grunt-contrib-watch verwendet ein Knotenpaket namens gaze. Es ist Blick, der das watched Objekt der zu beobachtenden Dateipfade erstellt und das die tatsächlichen Aufrufe zu fs.watch macht. Das watched-Objekt besteht aus Verzeichnispfaden als Schlüssel mit Arrays von absteigenden Dateipfaden und Unterverzeichnispfaden als Werten. Ein watched Objekt mit einer einzigen scripts.js Datei könnte wie folgt aussehen:

{  
    "C:\\{{path_to_your_application_root}}\\app\\Scripts\\": [ 
     "C:\\{{path_to_your_application_root}}\\app\\Scripts\\script.js" 
    ] 
} 

Der interessante Teil ist, dass, wenn Blick ist ein Filepath zum watched Objekt hinzufügen, es für alle Verzeichnisse sucht, die Geschwister des Filepath sind und fügt diese zu dem watched Objekt auch hinzu!

Der entsprechende Code aus dem Blick Quelle ist wie folgt:

// add folders into the mix 
var readdir = fs.readdirSync(dirname); 
for (var j = 0; j < readdir.length; j++) { 
    var dirfile = path.join(dirname, readdir[j]); 
    if (fs.lstatSync(dirfile).isDirectory()) { 
     helper.objectPush(this._watched, dirname, dirfile + path.sep); 
    } 
} 

Das Ergebnis davon ist, dass, wenn Ihr „index.html“ Dateipfad wird in der Anwendung Wurzel gefunden, alle Verzeichnisse, die innerhalb leben Ihr Anwendungsstamm (app /, bin /, bower_components/usw.) wird ebenfalls zum Objekt watched hinzugefügt.

Sie können dies bestätigen, indem Sie "index.html" von Ihrer Uhr entfernen, und Sie sollten nicht mehr alle Ordner-Überwachungen in Ihrer ausführlichen Ausgabe erhalten.

Hier ist eine link zu einer Diskussion, warum die Blickbibliothek dieses Verhalten hat.

Warum Ihre "app.styles.css" ist nicht angesehen: Sind Sie vielleicht ein Pfad zu dieser Datei fehlt. Ich sehe "app.styles.css" nicht im Stammverzeichnis Ihrer Anwendung. Vermutlich ist unter css/.

Answer 2

Nachdem ich Monate später auf dieses Thema zurückgekommen bin, habe ich endlich herausgefunden, was ich tun muss, damit es funktioniert. In Gruntfile.js müssen Sie innerhalb der css Eigenschaft options: { livereload: true} hinzufügen. Ich weiß nicht, warum Sie es in der watch Eigenschaft und dann wieder innerhalb der css Eigenschaft benötigen.

ein minimalistisches Arbeits Gruntfile.js mit einem lokalen Entwicklungsserver und livereload ist:

module.exports = function (grunt) { 

    "use strict"; 

    grunt.initConfig({ 
     watch: { 
      options: { 
       livereload: true 
      }, 
      css: { 
       files: ["css/**/*.css"], 

       /*********************************** ADDED THIS ************************/ 
       options: { 
        livereload: true 
       } 
      }, 
      js: { 
       files: ["app/**/*.js"] 
      }, 
      html: { 
       files: ["index.html", "app/**/*.html"] 
      } 
     }, 
     connect: { 
      server: { 
       options: { 
        port: 9000, 
        hostname: "*", 
        livereload: true, 
        open: true 
       } 
      } 
     }, 
     jshint: { 
      files: ["app/**/*.js"] 
     } 
    }); 

    grunt.loadNpmTasks("grunt-contrib-jshint"); 
    grunt.loadNpmTasks("grunt-contrib-watch"); 
    grunt.loadNpmTasks("grunt-contrib-connect"); 

    grunt.registerTask("default", ["connect", "watch"]); 
};