Fermer

septembre 3, 2018

Comment utiliser Gulp.js pour automatiser vos tâches CSS –


Dans cet article, nous examinons comment utiliser Gulp.js pour automatiser une série de tâches de développement CSS répétitives afin d'accélérer votre flux de travail.

Le développement Web ne nécessite guère plus qu'un éditeur de texte. Cependant, vous
devenez rapidement frustré par les tâches répétitives qui sont essentielles pour un site Web moderne et des performances rapides, telles que:

  • conversion ou transpiling
  • minimisation de la taille des fichiers
  • concaténation de fichiers
  • code de production
  • déployant des mises à jour sur des serveurs de développement, de transfert et de production en direct.

Certaines tâches doivent être répétées chaque fois que vous apportez une modification. Le développeur le plus infaillible oubliera d'optimiser une image ou deux et les tâches de préproduction deviennent de plus en plus ardues.

Heureusement, les ordinateurs ne se plaignent jamais du travail épuisant. Cet article explique comment utiliser Gulp.js pour automatiser les tâches CSS, notamment:

  • optimisation des images
  • compilation des fichiers Sass .scss
  • gestion des ressources
  • Ajout automatique des préfixes du fournisseur [19659004] en supprimant les sélecteurs CSS inutilisés
  • en réduisant la taille des fichiers CSS
  • en publiant les codes source à utiliser dans le navigateur DevTools
  • en rechargeant en direct un navigateur lorsque les fichiers source sont modifiés. GitHub et fonctionne sous Windows, Mac OS ou Linux.

    Pourquoi utiliser Gulp?

    Une variété de tâches sont disponibles pour les projets Web, y compris Gulp, Grunt, webpack et même les scripts npm. En fin de compte, le choix est à vous et peu importe ce que vous utilisez, car les visiteurs de votre site / application ne le sauront jamais .

    Gulp a quelques années mais stable, rapide, supporte beaucoup plugins, et est configuré en utilisant le code JavaScript. L'écriture de tâches dans du code présente plusieurs avantages et vous pouvez modifier la sortie en fonction des conditions, par exemple en ne minifiant que le CSS lors de la génération des fichiers finaux pour un déploiement en direct.

    Exemple de présentation du projet

    utilisé. Il s’agit de la version stable la plus récente et, bien que Gulp 4 soit disponible, ce n’est pas la version par défaut de npm . Si vous utilisez Gulp 4, reportez-vous à Comment mettre à jour vers Gulp 4? et modifier le code gulpfile.js en conséquence.

    La taille des fichiers image sera réduite avec gulp-imagemin qui optimise les bitmaps JPG, GIF et PNG ainsi que les graphiques vectoriels SVG.

    Les fichiers Sass .scss seront prétraités dans un fichier principal compatible avec les navigateurs. Fichier .css . Sass n'est pas considéré comme essentiel, car:

    Cela dit, Sass reste une option pratique pour le fractionnement de fichiers, l'organisation, les variables (statiques), les mixins et l'imbrication (en supposant que vous n'obtiendrez pas trop en profondeur)

    le fichier CSS compilé sera ensuite traité avec PostCSS pour apporter des améliorations supplémentaires telles que la gestion des ressources et le préfixe des fournisseurs.

    Premiers pas avec Gulp

    Si vous n'avez jamais utilisé Gulp, veuillez lire Introduction à Gulp.js . Voici les étapes de base pour démarrer à partir de votre terminal:

    1. Assurez-vous que Node.js est installé.
    2. Installez l'interface de ligne de commande Gulp globalement avec npm i gulp-cli -g .
    3. Créez un nouveau dossier de projet – par exemple, mkdir gulpcss – et entrez-le ( cd gulpcss ).
    4. Exécuter npm init ] et répond à chaque question (les défauts sont corrects). Cela créera un fichier de configuration de projet package.json .
    5. Créer un sous-dossier src pour les fichiers source: mkdir src .

    L'exemple projet utilise les sous-dossiers suivants:

    • src / images – fichiers image
    • src / scss – fichiers Sass source
    • build – le dossier où les fichiers compilés sont générés

    Page Test HTML

    Ce tutoriel se concentre sur les tâches liées à CSS, mais un fichier index.html dans le dossier racine est utile pour les tests. Ajoutez votre propre code de page avec un à la feuille de style finale. Par exemple:

    


  
  
   Utilisation de Gulp.js pour les tâches CSS 
  



  
     Mon exemple de page

    Installation du module

    La plupart des modules Node.js seront installés en tant que dépendances de projet. Pour installer Gulp et tous les plugins localement, procédez comme suit:

     npm i gulp-imagemin gulp-newer gulp-noop gulp-postcss gulp-sass gulp-gulp-sourcemaps éléments-postcss autoprefixer cssnano usedcss

    En supposant que
    utilise une version récente de npm tous les modules seront listés dans la section "dépendances" de package.json .

    sync-navigateur est installé en tant que dépendance de développement, car il n'est pas obligatoire sur les serveurs de production en direct:

     npm i synchro navigateur --save-dev

    Le module sera répertorié dans la section "devDependencies" de package.json .

    Création d'un fichier de tâches Gulp

    Les tâches Gulp sont définies dans un fichier JavaScript nommée gulpfile.js . Créez-le, puis ouvrez le fichier dans votre éditeur ( VS Code est le favori actuel). Ajoutez le code suivant:

     (() => {

  'use strict';

  / **************** Configuration de gulpfile.js **************** /

  const

    // développement ou production
    devBuild = ((process.env.NODE_ENV || 'développement'). trim (). toLowerCase () === 'development'),

    // emplacements du répertoire
    dir = {
      src: 'src /',
      build: 'build /'
    },

    // modules
    gulp = require ('gulp'),
    noop = require ('gulp-noop'),
    newer = require ('gulp-newer'),
    size = require ('gulp-size'),
    imagemin = require ('gulp-imagemin'),
    sass = require ('gulp-sass'),
    postcss = require ('gulp-postcss'),
    sourcemaps = devBuild? require ('gulp-sourcemaps'): null,
    browsersync = devBuild? require ('browser-sync'). create (): null;

  console.log ('Gulp', devBuild? 'développement': 'production', 'build');

}) ();

    Ceci définit une fonction à auto-exécution et des constantes pour:

    • devBuild – true si NODE_ENV est vide ou défini sur development
    • dir.src – le dossier du fichier source
    • dir.build – le dossier de compilation
    • Gulp et tous les modules de plug-in

    Notez que sourcemaps et browsersync ne sont activés que pour les versions de développement.

    Tâche image Gulp

    Créez le dossier src / images puis copiez certains fichiers image ou

    Insérez le code suivant sous le console.log dans gulpfile.js pour créer une tâche de traitement images :

     / *** ************* image tâche **************** /

  const imgConfig = {
    src: dir.src + 'images / ** / *',
    build: dir.build + 'images /',

    minOpts: {
      optimisationNiveau: 5
    }
  };

  gulp.task ('images', () =>

    gulp.src (imgConfig.src)
      .pipe (plus récent (imgConfig.build))
      .pipe (imagemin (imgConfig.minOpts))
      .pipe (taille ({showFiles: true}))
      .pipe (gulp.dest (imgConfig.build))

  );

    Les paramètres de configuration sont définis dans imgConfig qui définit:

    • un dossier src sur une image contenue dans src / images ou un sous-dossier
    • un dossier de build à options de génération / images et
    • gulp-imagemin .

    A gulp.task nommée images transmet des données à travers une série de canaux:

    1. Le dossier source est examiné.
    2. Le plug-in gulp-newer supprime toute nouvelle image présente dans le dossier de compilation. 19659004] Le plug-in gulp-imagemin optimise les fichiers restants.
    3. Le plug-in gulp-size affiche la taille résultante de tous les fichiers traités.
    4. Les fichiers sont enregistrés dans le gulp.dest dossier de compilation.

    Enregistrer gulpfile.js puis exécuter la tâche images à partir de la ligne de commande: [19659049] images gulp

    Le terminal affichera un journal comme ceci:

     Gulp development build
[16:55:12] Utilisation de gulpfile gulpfile.js
[16:55:12] À partir d'images '...'
[16:55:12] icons / alert.svg 306 B
[16:55:12] cave-0600.jpg 47,8 kB
[16:55:12] icons / fast.svg 240 B
[16:55:12] cave-1200.jpg 112 kB
[16:55:12] cave-1800.jpg 157 kB
[16:55:12] icons / reload.svg 303 B
[16:55:12] gulp-imagemin: 3 images miniatures (sauf 205 B - 19,4%)
[16:55:12] tous les fichiers 318 Ko
[16:55:12] 'Images' finies après 640 ms

    Examinez le dossier build / images créé pour trouver des versions optimisées de vos images. Si vous exécutez à nouveau gulp images rien ne se produira car seuls les fichiers les plus récents seront traités.

    Gulp CSS Task

    Créez un dossier src / scss avec un fichier nommé main.scss . C'est le fichier racine Sass qui importe d'autres partiels. Vous pouvez organiser ces fichiers comme vous le souhaitez mais, pour commencer, ajoutez:

     // main.scss
@import 'base / _base';

    Créez un dossier src / scss / base et ajoutez un fichier _base.scss avec le code suivant:

     // base / _base.scss partial
$ font-main: sans-serif;
$ font-size: 100%;

corps {
  font-family: $ font-main;
  taille de la police: $ font-size;
  couleur: # 444;
  couleur d'arrière-plan: #fff;
}

    Insérez le code suivant sous la tâche images dans gulpfile.js pour créer une tâche de traitement css :

     / ****** ********** La tâche CSS **************** /

  const cssConfig = {

    src: dir.src + 'scss / main.scss',
    regarder: dir.src + 'scss / ** / *',
    build: dir.build + 'css /',
    sassOpts: {
      sourceMap: devBuild,
      outputStyle: 'imbriqué',
      imagePath: '/ images /',
      précision: 3,
      errLogToConsole: true
    },

    postCSS: [
      require('postcss-assets')({
        loadPaths: ['images/'],
        basePath: dir.build
      }),
      require ('autoprefixer') ({
        navigateurs: ['> 1%']
      })
    ]

  };

  // supprime les sélecteurs inutilisés et minimise la production CSS
  if (! devBuild) {

    cssConfig.postCSS.push (
      require ('usedcss') ({html: ['index.html']}),
      require ('cssnano')
    );

  }

  gulp.task ('css', ['images']() =>

    gulp.src (cssConfig.src)
      .pipe (sourcemaps? sourcemaps.init (): noop ())
      .pipe (sass (cssConfig.sassOpts) .on ('error', sass.logError))
      .pipe (postcss (cssConfig.postCSS))
      .pipe (sourcemaps? sourcemaps.write (): noop ())
      .pipe (taille ({showFiles: true}))
      .pipe (gulp.dest (cssConfig.build))
      .pipe (browsersync? browsersync.reload ({stream: true}): noop ())

  );

    Les paramètres de configuration sont définis dans cssConfig qui définit:

    • le fichier src src / scss / main.scss
    • a watch dossier à n'importe quel fichier dans src / scss ou ses sous-dossiers
    • le dossier build à build / css
    • Options de gulp-sass dans sassOpts : elles sont transmises à node-sass qui appelle finalement LibSass .

    cssConfig.postCSS définit un tableau de PostCSS plug-ins et options de configuration. Le premier est postcss-assets qui peut résoudre les chemins d’URL d’image et transmettre des informations aux fichiers CSS. Par exemple, si myimage.png est un bitmap 400 x 300:

     .myimage {
  width: width ('myimage.png'); / * 400px * /
  height: height ('myimage.png'); / * 300px * /
  background-size: size ('myimage.png'); / * 400px 300px * /
}

    Il est également possible d’inclure des images bitmap ou SVG. Par exemple:

     .mysvg {
  background-image: inline ('mysvg.svg');
  / * url ('data: image / svg + xml; charset = utf-8, ... * /
}

    autoprefixer est le célèbre plugin PostCSS qui ajoute des préfixes de fournisseur selon les informations de caniuse.com . Dans la configuration ci-dessus, tous les navigateurs avec une part de marché mondiale de 1% ou plus auront des préfixes de fournisseurs ajoutés. Par exemple:

     filtre: opacité (0,5);

    devient:

     -webkit-filter: opacité (0,5);
filtre: opacité (0,5);

    Deux autres plug-ins PostCSS sont ajoutés lorsque NODE_ENV est réglé sur production :

    1. usedcss qui supprime les sélecteurs inutilisés en examinant l'exemple index.html file.
    2. cssnano qui réduit le fichier CSS résultant en supprimant tous les commentaires, les espaces, etc.

    A gulp.task nommé css est alors défini. Il exécute d'abord la tâche images car le CSS peut dépendre d'images. Il transmet ensuite les données via une série de canaux:

    1. Le dossier source est examiné.
    2. Si devBuild a la valeur true, le plug-in gulp-sourcemaps est initialisé. Sinon, le gulp-noop ne fait rien.
    3. Le plug-in gulp-sass transpile main.scss en CSS à l'aide du cssConfig.sassOpts options de configuration. Notez que le gestionnaire d'événements on ('error') empêche Gulp de se terminer lorsqu'une erreur de syntaxe Sass est rencontrée.
    4. Le CSS résultant est redirigé vers gulp-postcss qui applique les plugins
    5. Si les sourcemaps sont activés, ils sont maintenant ajoutés en tant qu'URI de données à la fin du CSS.
    6. Le plug-in gulp-size affiche la taille finale du fichier CSS.
    7. Les fichiers sont enregistrés dans le dossier de compilation gulp.dest .
    8. Enfin, si browsersync est défini, une instruction est envoyée à sync-navigateur pour actualiser le CSS dans tous les navigateurs connectés (voir ci-dessous).

    Enregistrez gulpfile.js puis exécutez la tâche à partir de la ligne de commande:

     gulp css

    Le terminal affichera un journal similaire à ceci:

     Gulp development build
[09:22:18] Utilisation de gulpfile gulpfile.js
[09:22:18] À partir d'images '...'
[09:22:18] gulp-imagemin: minifié 0 images
[09:22:18] 'Images' finies après 80 ms
[09:22:18] Lancement de 'css' ...
[09:22:18] main.css 1,07 Ko
[09:22:18] Terminé 'css' après 91 ms

    Examinez le dossier build / css créé pour trouver une version de développement du fichier main.css contenant les données sourcemap:

     body {
  font-family: sans-serif;
  taille de la police: 100%;
  couleur: # 444;
  couleur d'arrière-plan: #fff; }

/ * # sourceMappingURL = data: application / json; charset = utf8; base64, ...

    Automatisation de votre flux de travail

    Exécuter une tâche à la fois et actualiser manuellement votre navigateur n'est pas amusant. Heureusement, Browsersync fournit une solution apparemment magique:

    • Il implémente un serveur Web de développement ou un proxy sur un serveur existant.
    • Les modifications de code sont appliquées dynamiquement et CSS peut se rafraîchir sans rechargement complet de la page. 19659004] Les navigateurs connectés peuvent mettre en miroir le défilement et la saisie de formulaires. Par exemple, vous remplissez un formulaire sur votre ordinateur de bureau et vous le voyez se produire sur un périphérique mobile.
    • Il est
      entièrement compatible avec Gulp et les autres outils de génération.

    Insérez le code suivant sous le css tâche dans gulpfile.js pour définir:

    1. une tâche de traitement de browsersync

    2. a par défaut Tâche Gulp de surveillance des modifications de fichiers:

       `` `js
  / **************** Tâche de synchronisation du navigateur **************** /

  const syncConfig = {
    serveur: {
      baseDir: './',
      index: 'index.html'
    },
    port: 8000
    fichiers: dir.build + '** / *',
    ouvert: faux
  };

  // synchro navigateur
  gulp.task ('browsersync', () =>
    browsersync? browsersync.init (syncConfig): null
  );

  / **************** Regarder la tâche **************** /

  gulp.task ('default', ['css', 'browsersync']() => {
       // modifications d'image
gulp.watch (imgConfig.src, ['images']);

// Changements CSS
gulp.watch (cssConfig.watch, ['css']);

      } 
       `` `

    Les paramètres de configuration de la synchronisation de navigateur sont définis dans syncConfig qui définissent les options telles que le port et le fichier par défaut. La tâche browsersync se lance alors en conséquence.

    Browsersync est capable de surveiller lui-même les modifications de fichiers mais, dans ce cas, nous voulons le contrôler via Gulp 19659009] La tâche par défaut est une tâche qui s'exécute lorsque gulp est appelée sans nom de tâche. Il exécute les tâches css et browsersync pour construire initialement tous les fichiers (la tâche images est une dépendance de css ). Ensuite, gulp.watch reçoit un dossier à surveiller et les tâches associées à exécuter.

    Enregistrer gulpfile.js et exécuter la tâche par défaut à partir de la ligne de commande:

     gorgée

    Le terminal affichera un journal mais, contrairement à avant, il ne se terminera pas et restera actif:

     Gulp development build
[09:43:17] Utilisation de gulpfile gulpfile.js
[09:43:17] À partir d'images '...'
[09:43:17] Lancement de 'browsersync' ...
[09:43:17] 'browsersync' terminé après 23 ms
[Browsersync] URL d'accès:
 -------------------------------------
       Local: http: // localhost: 8000
    Externe: http://1.2.3.4:8000
 -------------------------------------
          Interface utilisateur: http: // localhost: 3001
 Interface utilisateur externe: http://1.2.3.4:3001
 -------------------------------------
[Browsersync] Servir des fichiers à partir de: ./
[09:43:17] gulp-imagemin: minifié 0 images
[09:43:17] "Images" terminées après 237 ms
[09:43:17] Lancement de 'css' ...
[09:43:17] main.css 11,3 ko
[Browsersync] 1 fichier modifié (main.css)
[09:43:17] 'css' terminé après 173 ms
[09:43:17] Lancement de 'default' ...
[09:43:17] Terminé 'default' après 21 ms

    Votre PC exécute maintenant un serveur Web depuis http: // localhost: 8000 . Les autres périphériques du réseau peuvent se connecter à l'URL External . Ouvrez l'URL dans un navigateur ou deux, puis apportez des modifications à n'importe quel fichier .scss . Les résultats sont immédiatement actualisés.

    Examinez n'importe quel élément des devTools et le panneau Styles affichera l'emplacement du code Sass pré-compilé. Vous pouvez cliquer sur le nom du fichier pour voir le code source complet:

    Prise en charge de sourcemap dans DevTools

    Appuyez sur Ctrl + C pour arrêter la tâche Gulp

    Code de production en direct

    La variable d'environnement NODE_ENV doit être définie sur production pour que les tâches Gulp sachent quand produire le code final, c'est-à-dire supprimer CSS, minimiser les fichiers et désactiver la génération de cartes source. Sur les terminaux Linux et MacOS:

     NODE_ENV = production

    Windows Powershell:

     $ env: NODE_ENV = "production"

    Ligne de commande Windows héritée:

     set NODE_ENV = production

    Vous pouvez effectuer l'une des opérations suivantes:

    • Créez le code de production en local, puis téléchargez-le sur des serveurs actifs.
    • Exécutez les tâches Gulp directement sur le serveur actif. Idéalement, NODE_ENV devrait être défini de manière permanente sur les machines de production en modifiant le script de démarrage – par exemple, ajouter export NODE_ENV = production à la fin d'un Linux ~ /. fichier bashrc .

    Exécuter gulp css pour générer le code final.

    Pour revenir au mode de développement, modifier NODE_ENV en development ou une chaîne vide.

    Étapes suivantes

    Cet article présente un flux de travail CSS Gulp possible, mais il peut être adapté à tout projet:

    • Il existe plus de 3 500 plug-ins Gulp . Beaucoup d'aide avec CSS et le prétraitement, mais vous pouvez en trouver d'autres pour le HTML, les templates, la gestion des images, JavaScript, les langages côté serveur, le linting et bien plus encore.
    • Il y a des centaines de plug-ins '
      s simple to       écrivez les vôtres .

    Quels que soient les outils que vous choisissez, je vous recommande:

    • Automatisez les tâches les plus frustrantes, chronophages ou améliorant les performances. Par exemple, l’optimisation des images peut réduire de plusieurs centaines de kilo-octets le poids total de votre page.
    • Ne compliquez pas trop votre processus de génération. Quelques heures suffisent pour démarrer.
    • Essayez d'autres coureurs de tâches, mais
      t activez un caprice!

    Le code ci-dessus est disponible à partir de github.com/craigbuckler/gulp- css . S'il vous plaît, utilisez-le comme vous le souhaitez!


    Craig est un consultant web indépendant britannique qui a construit sa première page pour IE2.0 en 1995. Depuis, il préconise les standards, l'accessibilité et les meilleures techniques HTML5. Il a écrit plus de 1000 articles pour SitePoint et vous pouvez le trouver @craigbuckler



Le meilleur outil 2023 pour ta croissance Instagram !



Source link