gulp
Guide complet d'un flux de travail frontal avec Gulpjs 2 of 2

Remarques

Configuration de la synchronisation du navigateur et configuration des observateurs pour le style et le script

REMARQUE

Cette page illustre l'utilisation de plugins gulp tels que browser-sync, gulp-watch et run-sequence, et continue à discuter de l' automatisation de workflows gulp depuis Gulpjs-workflow-automation-1 sur 2. Au cas où vous arriveriez ici, envisagez d'abord de passer par ce poste.

• Tâche par défaut
• Tâche de surveillance - pour créer continuellement vos ressources prêtes à être déployées à la volée, quelle que soit l'image JS | css changements sur le cours du développement.

Commençons par la synchronisation par navigateur.

Tâche de chien de garde Gulp

Commençons par la tâche de surveillance.

Le but est de surveiller les changements que vous apportez en cours de développement. Toute modification devrait déclencher la tâche de gulp correspondante.

De plus, nous avons besoin d'une fonctionnalité qui synchronise vos modifications sur le navigateur.

Synchronisation du navigateur

Nous devons donc installer Browser Sync.

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

Avec cette prémisse, ouvrons notre gulpfile.js et ajoutons la fonctionnalité de surveillance. Exigeons la synchronisation du navigateur et définissons certaines variables pour utiliser ses fonctionnalités.

En haut du fichier gulp, ajoutez l'extrait ci-dessous. Placez-le juste en dessous des déclarations de compression d'image.

ainsi:

//Browser-sync

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

La synchronisation du navigateur avec votre navigateur sur le navigateur est une configuration simple. Créons une tâche appelée chien de garde.

ainsi:

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


})

Maintenant, si nous parcourons les options de synchronisation du navigateur ici et que nous recherchons les paramètres du serveur, nous pouvons voir à quel point c'est facile.

Nous avons juste besoin de placer le ci-dessous à l'intérieur de notre tâche de surveillance

Snippet - 1 - À l'intérieur du chien de garde

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

Insérez le ci-dessus à l'intérieur de votre passe-partout chien de garde ci-dessus.

L'extrait suivant consiste à définir un observateur pour les styles, avec pour objectif de retraiter les fichiers CSS modifiés ou de nouveaux fichiers, et de déclencher automatiquement un rechargement du navigateur.

snippet - 2 - à l'intérieur du chien de garde

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

Insérez le ci-dessus à l'intérieur de votre passe-partout chien de garde ci-dessus.

Nous surveillons donc " [fonts/google/**/*.css , /**/*.css ]"

tous les fichiers css sous css / tous les fichiers css sous les polices / google / Lorsque quelque chose change ou qu'un nouveau fichier est ajouté, il déclenche la méthode de rechargement, qui est définie en haut de notre fichier gulpfile, dans la déclaration browsersync.

Remarque: vous remarquerez peut-être qu'un gestionnaire d'événements .on est associé à l'observateur.

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

Fondamentalement, tout élément CUD (Create | Update | Delete) déclenche la fonction de rechargement et transmet un objet Event comme paramètre à la fonction de rappel.

Le rappel est une fonction vitale, où nous pouvons réaliser des opérations telles que le non-cache sur la suppression des actifs.

• chemin
• type - Créer / Mettre à jour / Supprimer

Si un actif est supprimé, nous devons nous assurer que les caches que nous avons créés dans nos anciennes fonctions de minification, via gulp-caché et gulp-remember, nécessitent une mise à jour.

nous traitons cela dans l'extrait ci-dessous, qui se trouve dans le rappel sur le changement.

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

Remarque

$ -> alias pour gulp

$$ -> alias pour gulp-load-plugins

vous pourriez aussi remarquer que j'ai une sequence('optimizeStyles'); après avoir écrit l'invocation non cachée

La méthode de séquence garantit que la méthode synchrone s'exécute par défaut dans un javascript asynchrone.

l'installer est simple

FAIRE

bash $ npm install run-sequence

ensuite, déclarez-le dans votre fichier gulp juste en dessous de la déclaration de synchronisation du navigateur.

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

Donc, avec cette compréhension, l'observateur des scripts est facile à écrire. juste des globes différents!

Donc, ajoutez cet extrait sous le style watcher dans le cadre de surveillance.

Snippet - 3 - intérieur de la tâche de surveillance

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

Remarque

Nous avons utilisé deux fonctions dans nos extraits ci-dessus.

• non couché
• $$. Remember.forget Note:

$ -> Alias ​​pour gulp

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

Définissons la fonction uncache quelque part dans notre fichier gulpfile.js, avant de l'appeler.

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

Définition d'une tâche par défaut

Alors maintenant, laissez-nous terminer le code gulpfile, en définissant une tâche par défaut.

la tâche par défaut est celle qui s'exécute lorsque vous dites simplement

gulp

sur une invite de commande sous la racine de votre projet.

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