gulp
Omfattande guide till ett främre arbetsflöde med Gulpjs 2 av 2

Anmärkningar

Ställa in webbläsarsynkronisering och konfigurera tittare för stil och skript

NOTERA

Den här sidan illustrerar användning av gulp-plugins som webbläsarsynk, gulp-klocka och run-sekvens, och fortsätter att diskutera gulp-workflow-automatisering där vi slutade vid Gulpjs-workflow-automation-1 av 2. Om du landade här, överväga att gå igenom det inlägget först.

• Standarduppgift
• Vakthunduppgift - att kontinuerligt bygga upp dina tillgångar som är redo att installeras i farten, närhelst någonting bild | JS | css-förändringar under utvecklingen.

Låt oss börja med webbläsarsynkronisering.

Gulp vakthunduppgift

Låt oss börja med vakthunduppgiften.

Målet är att se efter förändringar du gör medan du utvecklar. Varje förändring bör utlösa motsvarande gulp-uppgift.

Vi behöver också en funktionalitet som synkroniserar dina ändringar i webbläsaren.

Webbläsarsynkronisering

Så vi måste installera Browser Sync.

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

Med det förutsättningen låt oss öppna vår gulpfile.js och lägga till klockfunktionen. Låt oss kräva webbläsarsynkronisering och definiera några variabler för att använda dess funktionalitet.

Lägg till nedre kod längst upp i gulpfilen. Placera den precis under bildkomprimeringsdeklarationerna.

såhär:

//Browser-sync

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

Att ha webbläsarsynkronisering synkronisera din utveckling till webbläsaren är en enkel konfiguration. Låt oss skapa en uppgift som heter vakthund.

såhär:

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


})

Nu, om vi bläddrar bland alternativen för webbsynkronisering här och söker efter serverinställningen, kan vi se hur lätt det är.

Vi behöver bara placera nedanför insidan av vår vakthunduppgift

Utdrag - 1 - inuti vakthundspannplattan

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

Sätt in ovannämnda insida av din vakthundspannplatta ovan.

Nästa avsnitt är att definiera en kikare för stilar, med ett mål att upparbeta ändrade css-filer eller nya, och utlösa en webbläsare ladda om automatiskt.

utdrag - 2 - inuti vakthundspannplatta

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

Sätt in ovannämnda insida av din vakthundspannplatta ovan.

Så vi övervakar " [fonts/google/**/*.css , /**/*.css ]" dvs.

alla css-filer under css / alla css-filer under teckensnitt / google / När någonting ändras, eller en ny fil läggs till, utlöses det omlastningsmetoden, som definieras högst upp i vår gulpfil, i webbläsarsynkdeklarationen.

Obs! Du kanske märker att vi har en .händelseshanterare kopplad till vattnet.

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

I grund och botten utlöser allt CUD (Skapa | Uppdatera | Radera) omlastningsfunktionen och överför ett händelseobjekt som en parameter till återuppringningsfunktionen.

Återuppringningen är en viktig funktion, där vi kan uppnå operationer som uncache vid borttagning av tillgångar. Nu har händelseobjektet parametrar som

• väg
• typ - Skapa / uppdatera / radera

Om en tillgång raderas, måste vi se till att cacheminne som vi byggde i våra tidigare minifieringsfunktioner, via gulpcachen och gulp-remember, behöver uppdateras.

vi hanterar det i utdraget nedan, som är inne i återuppringningen vid ändring.

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

Notera

$ -> alias för gulp

$$ -> alias för gulp-load-plugins

du kanske också märker att jag har en sequence('optimizeStyles'); efter att jag skrev anklagelsen om okache

Sekvensmetoden, säkerställer, synkron metod körs i en asynkron som standard javascript.

att installera det är enkelt

DO

bash $ npm install run-sequence

sedan förklara det i din gulpfile precis under webbläsarsynklarationen.

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

Så med den förståelsen är det lätt att skriva vadare för skript. bara olika jordklot!

Så lägg till det här utdraget nedanför stilvaktaren inuti pannplattan för vakthund.

Utdrag - 3 - inne i Watchdog-uppgiftspanneplattan

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

Notera

Vi använde två funktioner i våra utdrag ovan.

• uncache
• $$. kom ihåg. glöm Obs!

$ -> Alias för gulp

$$ -> Alias för gulp-load-plugins

Låt oss definiera funktionen uncache någonstans i vår gulpfile.js, innan den åberopas.

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

Definiera en standarduppgift

Så nu, låt oss avsluta gulpfile-koden genom att definiera en standarduppgift.

standarduppgiften är den som körs när du bara säger

gulp

på en kommandotolk under roten till ditt projekt.

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