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

septembre 3, 2018

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:

CSS standard offre désormais des fonctionnalités telles que les variables ( Propriétés personnalisées )
HTTP / 2 réduit le besoin

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:

Assurez-vous que Node.js est installé.
Installez l'interface de ligne de commande Gulp globalement avec npm i gulp-cli -g .
Créez un nouveau dossier de projet – par exemple, mkdir gulpcss – et entrez-le ( cd gulpcss ).
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 .
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: 

 Le dossier source est examiné. 
 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. 
 Le plug-in  gulp-size  affiche la taille résultante de tous les fichiers traités. 
 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 : 

  usedcss qui supprime les sélecteurs inutilisés en examinant l'exemple  index.html  file. 
  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: 

 Le dossier source est examiné. 
 Si  devBuild  a la valeur true, le plug-in  gulp-sourcemaps  est initialisé. Sinon, le  gulp-noop  ne fait rien. 
 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. 
 Le CSS résultant est redirigé vers  gulp-postcss qui applique les plugins 
 Si les sourcemaps sont activés, ils sont maintenant ajoutés en tant qu'URI de données à la fin du CSS. 
 Le plug-in  gulp-size  affiche la taille finale du fichier CSS. 
 Les fichiers sont enregistrés dans le dossier de compilation  gulp.dest . 
 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: 


 une tâche de traitement de  browsersync  


 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: 
  
 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

Pourquoi utiliser Gulp?

Exemple de présentation du projet

Premiers pas avec Gulp

Page Test HTML

Mon exemple de page

Installation du module

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

Tâche image Gulp

Gulp CSS Task

Automatisation de votre flux de travail

Code de production en direct

Étapes suivantes

Partager :