gulp
Wyczerpujący przewodnik po przepływie pracy z Gulpjs 2 z 2

Uwagi

Konfigurowanie synchronizacji przeglądarki i konfigurowanie obserwatorów dla stylu i skryptu

UWAGA

Ta strona ilustruje użycie wtyczek Gulp, takich jak synchronizacja przeglądarki, zegarek i sekwencja uruchamiania, i kontynuuje dyskusję na temat automatyzacji przepływu pracy od momentu, w którym zakończyliśmy pracę na Gulpjs-workflow-automation-1 z 2. W przypadku wylądowania tutaj, rozważ najpierw przejrzenie tego postu.

• Domyślne zadanie
• Zadanie nadzoru - ciągłe budowanie zasobów gotowych do wdrożenia w locie, gdy tylko pojawi się jakikolwiek obraz JS | zmiany css w trakcie rozwoju.

Zacznijmy od synchronizacji przeglądarki.

Gulp Watchdog Task

Zacznijmy od zadania nadzoru.

Celem jest obserwowanie zmian wprowadzanych podczas opracowywania. Każda zmiana powinna wyzwolić odpowiednie zadanie przełykania.

Potrzebujemy również funkcji, która synchronizuje zmiany w przeglądarce.

Synchronizacja przeglądarki

Musimy więc zainstalować Browser Sync.

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

Dzięki temu założeniu otwórzmy nasz plik gulpfile.js i dodajmy funkcję zegarka. Pozwól nam wymagać synchronizacji przeglądarki i zdefiniować niektóre zmienne, aby korzystać z jej funkcjonalności.

U góry pliku gulp dodaj poniższy fragment kodu. Umieść go poniżej deklaracji kompresji obrazu.

tak jak:

//Browser-sync

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

Synchronizacja przeglądarki zsynchronizuj swój rozwój z przeglądarką, to prosta konfiguracja. Utwórzmy zadanie o nazwie watchdog.

tak jak:

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


})

Teraz, jeśli przejrzymy tutaj opcje synchronizacji przeglądarki i wyszukamy ustawienia serwera, zobaczymy, jakie to łatwe.

Musimy tylko umieścić poniżej w naszym zadaniu nadzorczym

Snippet - 1 - wewnątrz płyty kontrolnej watchdoga

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

Włóż powyższą część płyty kontrolnej watchdog powyżej.

Następny fragment to zdefiniowanie obserwatora dla stylów, w celu ponownego przetworzenia zmienionych lub nowych plików css i automatycznego przeładowania przeglądarki.

snippet - 2 - wewnątrz płyty kontrolnej watchdoga

$.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')
});

Włóż powyższą część płyty kontrolnej watchdoga powyżej.

Dlatego monitorujemy " [fonts/google/**/*.css , /**/*.css ]" tj.

wszystkie pliki css w css / wszystkie pliki css w fonts / google / Gdy cokolwiek się zmieni lub nowy plik zostanie dodany, uruchamia metodę przeładowania, która jest zdefiniowana na górze naszego pliku gulp, w deklaracji browsersync.

Uwaga: możesz zauważyć, że do obserwatora jest dołączony moduł obsługi zdarzeń .on.

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

Zasadniczo wszystko CUD (Utwórz | Aktualizuj | Usuń) wyzwala funkcję przeładowania i przekazuje Obiekt zdarzenia jako parametr do funkcji wywołania zwrotnego.

Oddzwonienie jest istotną funkcją, w której możemy wykonywać operacje takie jak usuwanie pamięci podręcznej przy usuwaniu zasobów. Teraz obiekt zdarzenia ma parametry takie jak

• ścieżka
• typ - Utwórz / Aktualizuj / Usuń

Jeśli zasób zostanie usunięty, musimy upewnić się, że pamięci podręczne, które zbudowaliśmy w naszych wcześniejszych funkcjach minimalizacji, za pośrednictwem gulp-cached i gulp-Remember, wymagają aktualizacji.

radzimy sobie z tym we fragmencie poniżej, który znajduje się w wywołaniu zwrotnym przy zmianie.

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

Uwaga

$ -> alias dla łyka

$$ -> alias dla wtyczek gulp-load

możesz również zauważyć, że mam sequence('optimizeStyles'); po napisaniu inwokacji pamięci podręcznej

Metoda sekwencyjna zapewnia domyślnie, że metoda synchroniczna działa w asynchronicznym javascript.

instalacja jest prosta

ROBIĆ

bash $ npm install run-sequence

następnie zadeklaruj go w swoim pliku gulp tuż poniżej deklaracji synchronizacji przeglądarki.

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

Dzięki temu zrozumieniu obserwator skryptów jest łatwy do napisania. po prostu różne globusy!

Dodaj ten fragment kodu poniżej obserwatora stylu wewnątrz płyty kontrolnej watchdoga.

Snippet - 3 - wewnątrz płyty zadań zadania Watchdog

/*
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');
});

Uwaga

Użyliśmy dwóch funkcji w powyższych fragmentach.

• uncache
• $$. pamiętaj. zapomnij Uwaga:

$ -> Alias dla łyka

$$ -> Alias dla wtyczek gulp-load

Zdefiniujmy funkcję uncache gdzieś w naszym pliku gulpfile.js, zanim zostanie ona wywołana.

/*
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)
}

Definiowanie domyślnego zadania

A teraz zakończmy kod pliku gulp, definiując zadanie domyślne.

domyślnym zadaniem jest to, które jest uruchamiane, gdy tylko powiesz

gulp

w wierszu polecenia pod katalogiem głównym twojego projektu.

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