gulp
Guía completa para un flujo de trabajo frontal con Gulpjs 2 de 2

Observaciones

Configuración de la sincronización del navegador y configuración de observadores para estilo y secuencias de comandos

NOTA

Esta página ilustra el uso de complementos de truco como browser-sync, gulp-watch y run-sequence, y continúa discutiendo gulp-workflow-automation desde donde lo dejamos en Gulpjs-workflow-automation-1 de 2. En caso de que haya aterrizado aquí, Considera pasar por ese post primero.

• Tarea predeterminada
• Tarea de vigilancia: para construir continuamente sus activos listos para el despliegue sobre la marcha, siempre que haya algo de imagen | JS | Cambios de css en el curso del desarrollo.

Comencemos con la sincronización del navegador.

Gulp Watchdog Task

Comencemos con la tarea de vigilancia.

El objetivo es observar los cambios que realice durante el desarrollo. Cualquier cambio, debe desencadenar la correspondiente tarea engullida.

Además, necesitamos una funcionalidad que sincronice sus cambios en el navegador.

Sincronización del navegador

Por lo tanto, tenemos que instalar la sincronización del navegador.

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

Con esa premisa, abramos nuestro gulpfile.js y agreguemos la funcionalidad del reloj. Necesitamos la sincronización del navegador y definir algunas variables para usar su funcionalidad.

En la parte superior del gulpfile, agregue el siguiente fragmento de código. Colóquelo justo debajo de las declaraciones de compresión de la imagen.

al igual que:

//Browser-sync

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

Tener la sincronización del navegador sincroniza su desarrollo con el navegador, es una configuración simple. Vamos a crear una tarea llamada perro guardián.

al igual que:

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


})

Ahora, si exploramos las opciones de sincronización del navegador aquí y buscamos la configuración del servidor, podemos ver lo fácil que es.

Solo tenemos que colocar el interior debajo de nuestra tarea de vigilancia.

Fragmento - 1 - placa de calderín guardián interior

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

Inserta lo anterior en el interior de tu placa de control de arriba.

El siguiente fragmento, es definir un observador para los estilos, con el objetivo de volver a procesar los archivos CSS modificados o nuevos, y desencadenar una recarga del navegador automáticamente.

fragmento - 2 - placa de calderín de perro guardián interior

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

Inserta lo anterior en el interior de tu placa de control de arriba.

Entonces estamos monitoreando " [fonts/google/**/*.css , /**/*.css ]" es decir,

todos los archivos css bajo css / todos los archivos css bajo fonts / google / Cuando algo cambia, o se agrega un nuevo archivo, activa el método de recarga, que se define en la parte superior de nuestro archivo gulp, en la declaración de browsersync.

Nota: Es posible que observe que tenemos un controlador de eventos .on adjunto al observador.

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

Básicamente, cualquier CUD (Crear | Actualizar | Eliminar) activa la función de recarga y pasa un objeto de evento como parámetro a la función de devolución de llamada.

La devolución de llamada es una función vital, en la que podemos lograr operaciones como la eliminación de caché en la eliminación de activos. Ahora el objeto de evento tiene parámetros como

• camino
• tipo - Crear / Actualizar / Eliminar

Si se elimina un activo, debemos asegurarnos de que las cachés que construimos en nuestras funciones de minificación anteriores, a través de gulp-cached y gulp-remember, necesitan actualización.

estamos manejando eso en el fragmento siguiente, que está dentro de la devolución de llamada en el cambio.

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

Nota

$ -> alias para trago

$$ -> alias para gulp-load-plugins

También puede notar que tengo una sequence('optimizeStyles'); despues escribi la invocacion unacheque

El método de secuencia, asegura, método síncrono se ejecuta de forma asíncrona por javascript predeterminado.

instalarlo es simple

HACER

bash $ npm install run-sequence

luego, declare en su archivo gulp justo debajo de la declaración de sincronización del navegador.

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

Así que con esa comprensión, el observador de guiones es fácil de escribir. Sólo diferentes globos!

Entonces, agregue este fragmento debajo del observador de estilos dentro de la placa de control del perro guardián.

Fragmento - 3 - dentro de la placa de control de la tarea 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

Usamos dos funciones en nuestros fragmentos arriba.

• desentrañar
• $$. recordar. olvidar Nota:

$ -> Alias ​​para trago

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

Definamos la función uncache en algún lugar de nuestro gulpfile.js, antes de invocarla.

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

Definir una tarea predeterminada

Así que ahora, terminemos el código gulpfile, definiendo una tarea predeterminada.

la tarea predeterminada es la que se ejecuta, cuando se acaba de decir

gulp

en un indicador de comando debajo de la raíz de su proyecto.

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