gulp
Uitgebreide gids voor een front-end workflow met Gulpjs 2 van 2

Opmerkingen

Browsersynchronisatie instellen en Watchers configureren voor stijl en script

NOTITIE

Deze pagina illustreert het gebruik van gulp-plug-ins zoals browsersynchronisatie, gulp-watch en run-sequence, en gaat verder met het bespreken van gulp-workflow-automation vanaf het punt waar we zijn gestopt bij Gulpjs-workflow-automation-1 van 2. In het geval je hier terecht bent gekomen, overweeg eerst die post te doorlopen.

• Standaardtaak
• Waakhondtaak - om continu uw inzetbare middelen onmiddellijk te bouwen, wanneer er maar iets is image | JS | css verandert in de loop van de ontwikkeling.

Laten we beginnen met browsersynchronisatie.

Gulp Watchdog-taak

Laten we beginnen met de waakhondtaak.

Het doel is om te letten op veranderingen die je aanbrengt tijdens het ontwikkelen. Elke wijziging moet de bijbehorende sliptaak activeren.

We hebben ook een functionaliteit nodig die uw wijzigingen in de browser synchroniseert.

Browser synchronisatie

We moeten dus Browser Sync installeren.

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

Laten we met dat uitgangspunt onze gulpfile.js openen en de horloge-functionaliteit toevoegen. Laten we browsersynchronisatie vereisen en enkele variabelen definiëren om de functionaliteit ervan te gebruiken.

Voeg aan de bovenkant van het gulpbestand het onderstaande fragment toe. Plaats deze net onder de declaratie van de beeldcompressie.

zoals zo:

//Browser-sync

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

Het laten synchroniseren van uw browser met de browser is een eenvoudige configuratie. Laten we een taak maken die waakhond wordt genoemd.

zoals zo:

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


})

Nu, als we bladeren door browsersynchronisatie opties hier , en zoek naar de server setting, kunnen we zien hoe gemakkelijk het is.

We moeten alleen het onderstaande in onze waakhondtaak plaatsen

Fragment - 1 - binnenkant waakhond boilerplate

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

Plaats het bovenstaande in uw waakhond boilerplate hierboven.

Het volgende fragment is om een watcher voor stijlen te definiëren, met als doel gewijzigde css-bestanden of nieuwe te verwerken en een browser opnieuw te laten laden.

fragment - 2 - binnenkant waakhond boilerplate

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

Plaats het bovenstaande in uw waakhond boilerplate hierboven.

We houden dus toezicht op " [fonts/google/**/*.css , /**/*.css ]" ie,

alle css-bestanden onder css / alle css-bestanden onder lettertypen / google / Wanneer er iets verandert, of een nieuw bestand wordt toegevoegd, activeert het de herlaadmethode, die bovenaan onze gulpfile is gedefinieerd, in de browsersync-aangifte.

Opmerking: het kan je opvallen dat we een .on event-handler aan de watcher hebben gekoppeld.

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

Kortom, alles wat CUD (Create | Update | Delete) activeert de herlaadfunctie en geeft een gebeurtenisobject door als parameter aan de callback-functie.

De callback is een essentiële functie, waar we bewerkingen kunnen uitvoeren zoals ontkoppelen bij het verwijderen van activa. Nu heeft het gebeurtenisobject parameters zoals

• pad
• type - Maken / bijwerken / verwijderen

Als een activum wordt verwijderd, moeten we ervoor zorgen dat de caches die we in onze eerdere minificatiefuncties hebben gebouwd, via gulp-cache en gulp-remember, moeten worden bijgewerkt.

we behandelen dat in het onderstaande fragment, dat binnen de callback on change zit.

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

Notitie

$ -> alias voor gulp

$$ -> alias voor gulp-load-plugins

je zult misschien ook merken dat ik een sequence('optimizeStyles'); nadat ik de uncache-aanroep had geschreven

De sequentiemethode zorgt ervoor dat de synchrone methode standaard in een asynchrone JavaScript wordt uitgevoerd.

installeren is eenvoudig

DOEN

bash $ npm install run-sequence

verklaar het dan in uw gulpbestand net onder de synchroonverklaring van de browser.

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

Dus met dat begrip is de watcher voor scripts gemakkelijk te schrijven. gewoon verschillende globs!

Dus voeg dit fragment toe onder de stijlwatcher in de watchdog boilerplate.

Fragment - 3 - binnen Watchdog taak boilerplate

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

Notitie

We hebben twee functies gebruikt in onze bovenstaande fragmenten.

• uncache
• $$. remember.forget Opmerking:

$ -> Alias voor gulp

$$ -> Alias voor gulp-load-plug-ins

Laten we de functie uncache ergens in onze gulpfile.js definiëren voordat deze wordt aangeroepen.

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

Een standaardtaak definiëren

Laten we nu de gulpfile-code voltooien door een standaardtaak te definiëren.

de standaardtaak is degene die wordt uitgevoerd, als u het maar zegt

gulp

op een opdrachtprompt onder de hoofdmap van uw project.

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