gulp
Umfassender Leitfaden für einen Frontend-Workflow mit Gulpjs 2 von 2

Bemerkungen

Browsersynchronisation einrichten und Beobachter für Style und Script konfigurieren

HINWEIS

Diese Seite zeigt die Verwendung von gulp-Plugins wie browser-sync, gulp-watch und run-sequence und führt die Diskussion über gulp-workflow-automation weiter, von wo wir bei Gulpjs-workflow-automation-1 von 2 aufgehört haben. Falls Sie hier gelandet sind, Betrachten Sie zuerst diesen Post.

• Standardaufgabe
• Watchdog-Task - zur kontinuierlichen Erstellung von bereitstellungsbereiten Assets im laufenden Betrieb, wann immer Image-Dateien vorhanden sind JS | CSS ändert sich im Laufe der Entwicklung.

Beginnen wir mit der Browsersynchronisierung.

Gulp Watchdog-Aufgabe

Beginnen wir mit der Watchdog-Aufgabe.

Das Ziel ist, auf Änderungen zu achten, die Sie während der Entwicklung vornehmen. Jede Änderung sollte die entsprechende Schluckaufgabe auslösen.

Außerdem benötigen wir eine Funktion, die Ihre Änderungen im Browser synchronisiert.

Browsersynchronisation

Also müssen wir Browser Sync installieren.

bash $ npm install browser-sync --save-dev

Lassen Sie uns unter dieser Voraussetzung unsere gulpfile.js öffnen und die Watch-Funktionalität hinzufügen. Lassen Sie uns die Browsersynchronisierung benötigen und definieren Sie einige Variablen, um deren Funktionalität zu nutzen.

Fügen Sie am oberen Rand des Gulpfile den folgenden Ausschnitt ein. Platzieren Sie es direkt unter den Deklarationen für die Bildkomprimierung.

wie so:

//Browser-sync

var sync = require('browser-sync').create();
var reload = sync.reload;

Wenn der Browser Ihre Entwicklung mit dem Browser synchronisiert, ist dies eine einfache Konfiguration. Lassen Sie uns eine Aufgabe namens Watchdog erstellen.

wie so:

$.task('watchdog', function() {


})

Wenn wir hier die Browsersynchronisierungsoptionen durchsuchen und nach den Servereinstellungen suchen, können wir sehen, wie einfach dies ist.

Wir müssen nur das Folgende in unsere Watchdog-Aufgabe einfügen

Schnipsel - 1 - in der Watchdog-Heizplatte

/*
 Initiate Browser sync
 @documentation - https://www.browsersync.io/docs/options/
 */
 sync.init({
  server: {
    baseDir: "./"
 },
 port: 8000 //change it as required
 });

Setzen Sie oben in Ihre Watchdog-Heizplatte ein.

Der nächste Ausschnitt besteht darin, einen Watcher für Stile zu definieren, mit dem Ziel, geänderte oder neue CSS-Dateien erneut zu verarbeiten und einen Browser-Reload automatisch auszulösen.

Schnipsel - 2 - innerhalb der Watchdog-Kochplatte

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);
}
sequence('optimizeStyles')
});

Setzen Sie oben in Ihre Watchdog-Heizplatte ein.

Wir überwachen also " [fonts/google/**/*.css , /**/*.css ]" dh

Alle CSS-Dateien unter css / Alle CSS-Dateien unter fonts / google / Wenn sich etwas ändert oder eine neue Datei hinzugefügt wird, wird die Reload-Methode ausgelöst, die oben in unserer gpfile in der browsersync-Deklaration definiert ist.

Hinweis: Möglicherweise stellen Sie fest, dass an den Beobachter ein .on- Ereignishandler angehängt ist.

$.watch(['css/**/*', 'fonts/google/**/*.css'], reload).on('change', function(event) 

Grundsätzlich löst eine CUD (Create | Update | Delete) die Reload-Funktion aus und übergibt ein Event-Objekt als Parameter an die Callback-Funktion.

Der Rückruf ist eine wichtige Funktion, mit der wir Operationen wie das Uncache beim Löschen von Objekten durchführen können. Jetzt hat das Ereignisobjekt Parameter wie

• Pfad
• type - Erstellen / Aktualisieren / Löschen

Wenn ein Asset gelöscht wird, müssen wir sicherstellen, dass die Caches, die wir in unseren früheren Minifikationsfunktionen über gulp-cached und gulp-remember aufgebaut haben, aktualisiert werden müssen.

Wir behandeln das im Snippet unten, das sich bei Änderung im Callback befindet.

if (event.type === 'deleted') { 
uncache('styles', event.path);
$$.remember.forget('auto-prefixed-stylesheets', event.path);  
}

Hinweis

$ -> Alias ​​für Schluck

$$ -> Alias ​​für gulp-load-plugins

Sie könnten auch feststellen, dass ich eine sequence('optimizeStyles'); nachdem ich den uncache Aufruf geschrieben habe

Die Sequenzmethode stellt sicher, dass die synchrone Methode standardmäßig in einem asynchronen Javascript ausgeführt wird.

die Installation ist einfach

TUN

bash $ npm install run-sequence

Dann deklarieren Sie es in Ihrer Gulpfile direkt unter der Browser-Synchronisierungsdeklaration.

var sequence = require('run-sequence');

Mit diesem Verständnis ist der Watcher für Skripte leicht zu schreiben. nur verschiedene globs!

Fügen Sie dieses Snippet unterhalb des Style-Watchers in der Watchdog-Boilerplate hinzu.

Schnipsel - 3 - in Watchdog Task-Speicherplatte

/*
on addition or change or deletion of a file in the watched directories
the change event is triggered. An event object with properties like
path,
event-type
is available for perusal passed to the callback

*/
$.watch('js/**/*', reload).on('change', function(event) {
console.log(event.type + ':' + event.path)
if (event.type === 'deleted') {
uncache('scripts', event.path);
$$.remember.forget('linted-scripts', event.path);
}
sequence('optimizeScripts');
});

Hinweis

Wir haben zwei Funktionen in unseren obigen Ausschnitten verwendet.

• uncache
• Hinweis:

$ -> Alias ​​für Schluck

$$ -> Alias ​​für gulp-load-plugins

Definieren Sie die Funktion uncache irgendwo in unserer Datei gulpfile.js, bevor sie aufgerufen wird.

/*
Deletes a cache entry
*/
var uncache = function(cacheName, cacheKey) {
        var cache = $$.cached;
        if (cache.caches[cacheName] && cache.caches[cacheName][cacheKey])
            return delete cache.caches[cacheName][cacheKey];
        return false;
    }
    /*
    logs current cache created via gulp-cached
    */
var viewCache = function() {
    console.log($$.cached.caches)
}

Standardaufgabe definieren

Lassen Sie uns nun den gulpfile-Code beenden, indem Sie eine Standardaufgabe definieren.

Die Standardaufgabe ist die, die ausgeführt wird, wenn Sie nur sagen

gulp

an einer Eingabeaufforderung unter dem Stamm Ihres Projekts.

$.task('default', ['generateResponsiveImages'], function() {
 $.start('watchdog');
 console.log('Starting Incremental Build');
});