gulp
Guida completa a un flusso di lavoro front-end con Gulpjs 2 di 2

Osservazioni

Impostazione della sincronizzazione del browser e configurazione degli osservatori per stile e script

NOTA

Questa pagina illustra l'uso di plug-in gulp come browser-sync, gulp-watch e sequenza di esecuzione e continua a discutere di gulp-workflow-automation da dove abbiamo interrotto Gulpjs-workflow-automation-1 di 2. Se sei atterrato qui, considera prima di passare per quel post.

• Task predefinito
• Attività di watchdog: per costruire continuamente le risorse pronte per l'implementazione al volo, ogni volta che si tratta di un'immagine | JS | cambiamenti di css nel corso dello sviluppo.

Cominciamo con la sincronizzazione del browser.

Gulp Watchdog Task

Cominciamo con il compito di watchdog.

L'obiettivo è quello di osservare le modifiche che apporti durante lo sviluppo. Qualsiasi cambiamento, dovrebbe innescare il compito gulp corrispondente.

Inoltre, abbiamo bisogno di una funzionalità che sincronizzi le modifiche sul browser.

Sincronizzazione del browser

Quindi, dobbiamo installare Browser Sync.

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

Con questa premessa, apriamo il nostro gulpfile.js e aggiungiamo la funzionalità dell'orologio. Cerchiamo di richiedere la sincronizzazione del browser e definire alcune variabili per utilizzare la sua funzionalità.

Nella parte superiore del file gulp, aggiungi lo snippet di sotto. Mettilo appena sotto le dichiarazioni di compressione dell'immagine.

così:

//Browser-sync

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

La sincronizzazione del browser per sincronizzare lo sviluppo con il browser è una semplice configurazione. Cerchiamo di creare un'attività chiamata watchdog.

così:

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


})

Ora, se navighiamo attraverso le opzioni di sincronizzazione del browser qui e cerchiamo l'impostazione del server, possiamo vedere quanto sia facile.

Abbiamo solo bisogno di inserire il sotto all'interno del nostro compito di watchdog

Snippet - 1 - all'interno del boiler watchdog

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

Inserisci qui sopra il boilerplate del tuo watchdog sopra.

Il snippet successivo consiste nel definire un watcher per gli stili, con l'obiettivo di rielaborare i file css modificati o nuovi e attivare automaticamente il ricaricamento del browser.

snippet - 2 - all'interno del boiler watchdog

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

Inserisci qui sopra il boilerplate del tuo watchdog sopra.

Quindi stiamo monitorando " [fonts/google/**/*.css , /**/*.css ]" cioè,

tutti i file css sotto css / tutti i file css sotto fonts / google / Quando qualcosa cambia, o viene aggiunto un nuovo file, si innesca il metodo di ricarica, che è definito nella parte superiore del nostro gulpfile, nella dichiarazione browsersync.

Nota: Si potrebbe notare, che abbiamo un gestore di eventi .on attaccato al watcher.

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

Fondamentalmente, qualsiasi CUD (Crea | Aggiorna | Elimina) attiva la funzione di ricarica e passa un oggetto evento come parametro alla funzione di callback.

Il callback è una funzione vitale, dove possiamo ottenere operazioni come uncache sulla cancellazione degli asset. Ora l'oggetto evento ha parametri simili

• sentiero
• tipo - Crea / Aggiorna / Elimina

Se una risorsa viene eliminata, dobbiamo assicurarci che le cache che abbiamo creato nelle nostre precedenti funzioni di minificazione, tramite gulp-cache e gulp-remember, abbiano bisogno di aggiornamento.

lo gestiamo nel frammento di seguito, che è all'interno del callback sul cambiamento.

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

Nota

$ -> alias per gulp

$$ -> alias per gulp-load-plugins

potreste anche notare che ho una sequence('optimizeStyles'); dopo che ho scritto l'invocazione uncache

Il metodo di sequenza garantisce che il metodo sincrono venga eseguito in modo asincrono per impostazione predefinita javascript.

installarlo è semplice

FARE

bash $ npm install run-sequence

quindi, dichiaralo nel tuo gulpfile appena sotto la dichiarazione di sincronizzazione del browser.

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

Quindi con questa comprensione, l'osservatore delle sceneggiature è facile da scrivere. solo diversi globi!

Quindi, aggiungi questo snippet sotto l'osservatore di stile all'interno del boilerdog del watchdog.

Snippet - 3 - inside boilerplate task 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');
});

Nota

Abbiamo utilizzato due funzioni nei nostri frammenti sopra.

• rimozione dati dalla cache
• $$. remember.forget Nota:

$ -> Alias ​​per gulp

$$ -> Alias ​​per gulp-load-plugins

Definiamo la funzione uncache da qualche parte nel nostro gulpfile.js, prima che venga invocato.

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

Definizione di un'attività predefinita

Quindi ora, completiamo il codice gulpfile, definendo un'attività predefinita.

l'attività predefinita è quella che viene eseguita, quando si dice

gulp

su un prompt dei comandi sotto la radice del tuo progetto.

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