Contents

  1. Pourquoi ?
  2. Outils
  3. Le processus
    1. Installer le thème et créer le sous-thème en Drupal
    2. Installer nvm
    3. Installer node.js et npm
    4. Installer gulp et les paquets requis
    5. Configurer gulp.js
      1. Rouler gulp
      2. Débogage
    6. Configurer git

Gulp.js est utilisé pour la compilation de code (souvent SCSS à CSS) et autres tâches, en particulier avec le thème bootstrap_barrio et son SASS Starterkit (bootstrap_sass).

Les docs:

Exemples de projets :

Pourquoi ?

Sass est un outil de développement qui peut accélérer l'écriture des feuilles de style: https://sass-lang.com/guide

Pourquoi utiliser Sass ? https://duckduckgo.com/?t=ffab&q=pourquoi+utiliser+sass&ia=web

Le SASS Starterkit (bootstrap_sass) nous permet de compiler les feuilles de styles de bootstrap avec nos propres styles parce qu'on peut définer nos propres variables et mixins et outrepasser les styles par défaut de bootstrap. Pour mieux comprendre comment cela fonctionne, on peut regarder le fichier scss/import.scss : 

   1 /* IMPORTS */
   2 
   3 // Import font files first
   4 
   5 @import "fonts";
   6 
   7 // Variables
   8 
   9 @import "variables";
  10 
  11 // Mixins
  12 
  13 @import "mixins";
  14 
  15 // Responsive Font Size mixins
  16 
  17 // automatied responsive font sizing
  18 
  19 // see https://github.com/twbs/rfs
  20 
  21 @import "rfs";
  22 
  23 // Typography 
  24 
  25 // uses previously loaded mixins, variables.
  26 
  27 @import "typography";
  28 
  29 // Bootstrap - load bootstrap scss after theme variables, mixins
  30 
  31 @import "../node_modules/bootstrap/scss/bootstrap";
  32 
  33 // Barrio - connect theme scss components
  34 
  35 @import "barrio";

Si on utilise les mêmes variables et mixins utilisés par Bootstrap, on peut définir nos propres styles pour remplacer celle de bootstrap (en place de bâtir contre les règles de bootstrap).

Outils

Pour profiter de tout ça, on a besoin d'un outil pour compiler les fichiers .scss à .css! Le projet bootstrap_sass suggère gulp.js et est configuré pour l'utilisation avec gulp.js. Gulp.js "est un exécuteur de tâches construit sur Node.js et npm, utilisé pour l'automatisation des tâches répétitives dans le développement web, comme la minification, concaténation, tests unitaires, optimisation, etc". Donc pout utiliser gulp (et node-sass), on a besoin de plonger dans le monde de node.js (... et npm... et nvm) ! (oui, c'est beaucoup, mais on ne lache pas!)

Il y a déjà une version de node.js installer en Debian, mais c'est trop ancien pour être utile à nous, et comme il y a plusieurs versions de node.js soutenu en même temps, on a besoin d'un outil pour la gestion des versions. Dans le plupart de cas, la meilleure façon de travailler avec node.js est d'utiliser un gestionnaire de version ("version manager") et ici on va utiliser nvm.

npm est le gestionnaire de paquets (ou "dependency manager" / "package manager") officiel de Node.js. npm va lire le fichier package.json (inclut dans le projet bootstrap_sass) et installer tous les paquets requis par le projet et on va utiliser npm pour installer gulp.js.

En bref, nvm et npm sont deux outils qu'on peut utiliser pour gérer la "dependency hell" de node.js !

Le processus

Installer le thème et créer le sous-thème en Drupal

Pour commencer, nous allons besoin d'installer le thème de base (bootstrap_barrio), le projet du SASS Starterkit (bootstrap_sass) et notre sous-thème. Suivre les instructions de la documentation : https://www.drupal.org/docs/contributed-themes/bootstrap-4-sass-barrio-starter-kit/installation (utiliser le script à scripts/create_subtheme.sh pour créer le sous-thème).

Exemple: 

jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/contrib$ drush dl bootstrap_barrio bootstrap_sass
jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/contrib$ cd bootstrap_sass
jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/contrib/bootstrap_sass$ chmod +x scripts/create_subtheme.sh
jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/contrib/bootstrap_sass$ ./scripts/create_subtheme.sh
jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/contrib/bootstrap_sass$ cd ../custom
jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom$ ls -lah
total 24K
drwxrwxr-x+  3 aegir aegir 4.0K Dec 23 17:33 .
drwxrwxr-x+  4 aegir aegir 4.0K Dec 23 19:12 ..
drwxrwxr-x+ 10 aegir aegir 4.0K Dec 23 20:26 agecvm_saas

Appliquer le patch #3199572 

   1 $ wget https://www.drupal.org/files/issues/2021-02-22/3199572-2.patch
   2 --2022-01-05 08:10:10--  https://www.drupal.org/files/issues/2021-02-22/3199572-2.patch
   3 Resolving www.drupal.org (www.drupal.org)... 151.101.138.217
   4 Connecting to www.drupal.org (www.drupal.org)|151.101.138.217|:443... connected.
   5 HTTP request sent, awaiting response... 200 OK
   6 Length: 508 [text/plain]
   7 Saving to: ‘3199572-2.patch’ 
   8 
   9 3199572-2.patch         100%[=============================>]     508  --.-KB/s    in 0s
  10 
  11 2022-01-05 08:10:10 (9.63 MB/s) - ‘3199572-2.patch’ saved [508/508]
  12 
  13 $ patch -p1 -b < 3199572-2.patch
  14 patching file README.txt
  15 patching file package.json
  16 Hunk #1 succeeded at 37 with fuzz 1 (offset -1 lines).
  17

Installer nvm

Ensuite, nous pouvons vérifier si les outils sont déjà installés : 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom$ node -v
   2 v10.24.0
   3 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom$ npm -v
   4 5.8.0
   5 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ nvm -v
   6 -bash: nvm: command not found

On ne veut pas utiliser node.js v10, donc on avance avec l'installation de nvm.

Voir :

On va utiliser la méthode d'installation avec git: https://github.com/nvm-sh/nvm#git-install 

   1 # cloner le projet dans le répertoire home (~/) de ton utilisateur
   2 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ cd
   3 jaime@dev1:~$ pwd
   4 /home/jaime
   5 # téléverser le code de nvm
   6 jaime@dev1:~$ git clone https://github.com/nvm-sh/nvm.git .nvm
   7 Cloning into '.nvm'...
   8 remote: Enumerating objects: 8656, done.
   9 remote: Counting objects: 100% (87/87), done.
  10 remote: Compressing objects: 100% (48/48), done.
  11 remote: Total 8656 (delta 47), reused 65 (delta 34), pack-reused 8569
  12 Receiving objects: 100% (8656/8656), 3.20 MiB | 13.26 MiB/s, done.
  13 Resolving deltas: 100% (5487/5487), done.
  14 jaime@dev1:~$ cd .nvm/
  15 jaime@dev1:~/.nvm$ git checkout v0.39.1
  16 Note: checking out 'v0.39.1'.
  17 
  18 You are in 'detached HEAD' state. You can look around, make experimental
  19 changes and commit them, and you can discard any commits you make in this
  20 state without impacting any branches by performing another checkout.
  21 
  22 If you want to create a new branch to retain commits you create, you may
  23 do so (now or later) by using -b with the checkout command again. Example:
  24 
  25   git checkout -b <new-branch-name>
  26 
  27 HEAD is now at 9600617 v0.39.1
  28 # activer npm
  29 jaime@dev1:~/.nvm$ . ./nvm.sh 
  30 # c'est maintenant installé, mais pas disponible à nous sans utiliser le chemin complète vers les fichiers
  31 jaime@dev1:~/.nvm$ nvm --version
  32 -bash: nvm: command not found
  33 # on a besoin de modifier un fichier de configuration pour utiliser nvm
  34 # ouvrir le fichier ~/.bashrc (ou ~/.profile s'il n'y a pas de .bashrc) pour ajouter les trois lignes suivantes:
  35 jaime@dev1:~/.nvm$ nano ../.bashrc # ou vim ../.bashrc
  36 export NVM_DIR="$HOME/.nvm"
  37 [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
  38 [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion]
  39 # vérifier que la dernière étape a fonctionné
  40 jaime@dev1:~/.nvm$ nvm --version
  41 0.39.1

Nous pouvons maintenant utiliser nvm pour installer node.js!

Avant d'avancer, lire la documentation de l'utilisation de nvm: https://github.com/nvm-sh/nvm#usage

Installer node.js et npm

Nous allons installer node.js avec la méthode locale (donc on ne va jamais utiliser l'option --global). C'est à dire, que nous allons installer node.js dans la répertoire de notre projet et node/npm ne sera pas capable d'agir ou affecter le site ou le serveur hors de la racine de notre projet (dans ce cas, le répertoire de notre thème, où se retrouve le fichier package.json).

Nous voulons installer la publication LTS la plus récente de v10, c'est la version le plus récent qui est compatible avec gulp - voir issue #3199572. 

   1 # aller au répertoire racine du projet
   2 jaime@dev1:~/.nvm$ cd /var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas/
   3 
   4 # on peut utiliser nvm ls-remote pour chercher une liste de tous les versions disponibles
   5 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ nvm ls-remote
   6 # ça va afficher un grand liste de versions!
   7 # on veut trouver quelque chose qui ressemble à ça:
   8 
   9        v10.23.2   (LTS: Dubnium)
  10        v10.23.3   (LTS: Dubnium)
  11        v10.24.0   (LTS: Dubnium)
  12        v10.24.1   (Latest LTS: Dubnium)
  13         v11.0.0
  14         v11.1.0
  15 
  16 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ nvm install 10.24.1
  17 Downloading and installing node v10.24.1...
  18 Downloading https://nodejs.org/dist/v10.24.1/node-v10.24.1-linux-x64.tar.xz...
  19 ################################################################################### 100.0%
  20 Computing checksum with sha256sum
  21 Checksums matched!
  22 Now using node v10.24.1 (npm v6.14.12)
  23 
  24 # nb. quand on installe node.js, npm est également installé !
  25 
  26 # on peut vérifier que l'installation a bien passé et que la commande utilise les propres versions
  27 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ node -v
  28 v14.18.2
  29 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm -v
  30 6.14.15
  31 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ which node
  32 /home/jaime/.nvm/versions/node/v14.18.2/bin/node
  33 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ which npm
  34 /home/jaime/.nvm/versions/node/v14.18.2/bin/npm

Si la commande which afficher un chemin comme /usr/bin/node, l'installation avec nvm n'a pas fonctionné

Installer gulp et les paquets requis

Et maintenant on peut finalement utiliser npm install gulp-cli pour installer npm, gulp et tous les autres paquets (une fois encore, N'UTILISE *PAS* L'OPTION --global !!!) : 

   1 # installer gulp-cli
   2 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm install gulp-cli
   3 npm notice created a lockfile as package-lock.json. You should commit this file.
   4 npm WARN barrio_sass@5.1.0 No repository field.
   5 
   6 + gulp-cli@2.3.0
   7 added 252 packages from 165 contributors and audited 252 packages in 12.316s
   8 
   9 6 packages are looking for funding
  10   run `npm fund` for details
  11 
  12 found 0 vulnerabilities
  13 
  14 # installer les autres paquets requis
  15 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm install
  16 # surveiller les résultats
  17 [...un grand output...]
  18 added 532 packages from 729 contributors and audited 786 packages in 28.216s
  19 
  20 22 packages are looking for funding
  21   run `npm fund` for details
  22 
  23 found 14 vulnerabilities (5 moderate, 8 high, 1 critical)
  24   run `npm audit fix` to fix them, or `npm audit` for details
  25 
  26 # on veut régler les problèmes autant que possible
  27 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm audit

Suivre les instructions affichées par npm audit pour régler les problèmes.

Par exemple: 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm audit
   2                                                                                 
   3                        === npm audit security report ===                        
   4                                                                                 
   5 # Run  npm install --save-dev gulp-sass@5.0.0  to resolve 10 vulnerabilities
   6 SEMVER WARNING: Recommended action is a potentially breaking change
   7 ┌───────────────┬──────────────────────────────────────────────────────────────┐
   8 │ Moderate      │  Inefficient Regular Expression Complexity in                │
   9 │               │ chalk/ansi-regex                                             │
  10 ├───────────────┼──────────────────────────────────────────────────────────────┤
  11 │ Package       │ ansi-regex                                                   │
  12 ├───────────────┼──────────────────────────────────────────────────────────────┤
  13 │ Dependency of │ gulp-sass [dev]                                              │
  14 ├───────────────┼──────────────────────────────────────────────────────────────┤
  15 │ Path          │ gulp-sass > node-sass > sass-graph > yargs > string-width >  │
  16 │               │ strip-ansi > ansi-regex                                      │
  17 ├───────────────┼──────────────────────────────────────────────────────────────┤
  18 │ More info     │ https://github.com/advisories/GHSA-93q8-gq69-wqmw            │
  19 └───────────────┴──────────────────────────────────────────────────────────────┘
  20 
  21 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm install --save-dev gulp-sass@5.0.0
  22 npm WARN barrio_sass@5.1.0 No repository field.
  23 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
  24 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wan
  25 ted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
  26 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/glob-watcher
  27 /node_modules/fsevents):
  28 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wa
  29 nted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
  30 
  31 + gulp-sass@5.0.0
  32 added 3 packages from 5 contributors, removed 117 packages, updated 6 packages and audited
  33  672 packages in 9.935s
  34 
  35 20 packages are looking for funding
  36   run `npm fund` for details
  37 
  38 found 4 vulnerabilities (1 moderate, 2 high, 1 critical)
  39   run `npm audit fix` to fix them, or `npm audit` for details
  40 
  41 # et on continue le déboggage avec npm audit..
  42 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm audit

Il n'y a pas les solutions pour tous les bogues, mais on n'a pas installé les paquets dans la manière globale et on ne va pas installer node.js dans l'environnement en production, donc ce n'est pas un gros problème.

Finalement, on peut installer sass! Comme mentionné dans les instructions d'installation de gulp-sass, on a besoin d'installer un compiler d'un autre paquet npm. 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ npm install sass
   2 npm WARN postcss-inline-svg@5.0.0 requires a peer of postcss@^8.1.4 but none is installed. You must install peer dependencies yourself.
   3 npm WARN barrio_sass@5.1.0 No repository field.
   4 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
   5 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
   6 npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules/glob-watcher/node_modules/fsevents):
   7 npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
   8 
   9 + sass@1.45.1
  10 added 3 packages from 39 contributors and audited 673 packages in 9.615s
  11 
  12 29 packages are looking for funding
  13   run `npm fund` for details
  14 
  15 found 4 vulnerabilities (3 high, 1 critical)
  16   run `npm audit fix` to fix them, or `npm audit` for details

Configurer gulp.js

Comme décrit dans la documentation, nous pouvons modifier le gulpfile avec l'adresse du site en développement pour configurer browser-sync :

Exemple: 

// Static Server + watching scss/html files
function serve () {
  browserSync.init({
    proxy: 'agecvm-dev.dev1.aegir.koumbit.net',
  })

  gulp.watch([paths.scss.watch, paths.scss.bootstrap], styles).on('change', browserSync.reload)
}

Browsersync va surveiller les fichiers css et mettre à jour le site dans le navigateur quand il y a les changements. C'est utile, mais pas nécessaire pour la compilation du code.

C'est utile de lire le fichier gulp.js pour comprendre quoi gulp fait! Les premières lignes décrivent les paquets requis par la configuration dans le gulpfile -- rechercher les paquets sur npmjs.com pour comprendre le rôle de chacun!

Rouler gulp

Rouler gulp pour vérifier que tout fonctionne bien!

On a besoin de spécifier quel gulp on veut utiliser, donc on devrait utiliser 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ node_modules/gulp/bin/gulp.js

en place de 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ gulp

on peut regarder which gulp pour comprendre pourquoi! 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ which gulp
   2 /usr/bin/gulp                                    # on ne veut pas utiliser cette version!
   3 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ node_modules/gulp/bin/gulp.js --version
   4 CLI version: 2.3.0
   5 Local version: 4.0.2

Gulp va afficher les erreurs de syntax ou autres problèmes : 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit
   2 .net/themes/custom/agecvm_saas$ node_modules/gulp/bin/gulp.js
   3 [16:05:00] Using gulpfile /home/agecvm-sftponly/agecvm-dev.dev1.aegir.koumbit.net/themes/c
   4 ustom/agecvm_saas/gulpfile.js
   5 [16:05:00] Starting 'default'...
   6 [16:05:00] Starting 'styles'...
   7 Deprecation Warning: Using / for division outside of calc() is deprecated and will be remo
   8 ved in Dart Sass 2.0.0.
   9 
  10 Recommendation: math.div($spacer, 2) or calc($spacer / 2)
  11 
  12 More info and automated migrator: https://sass-lang.com/d/slash-div
  13     
  14    ╷
  15 62 │     margin-top: $spacer / 2;
  16    │                 ^^^^^^^^^^^
  17    ╵
  18     ../../contrib/bootstrap_barrio/scss/components/commerce.scss 62:17  @import
  19     ../../contrib/bootstrap_barrio/scss/barrio.scss 8:9                 @import
  20     scss/import.scss 15:9                                               @import
  21     scss/style.scss 7:9                                                 root stylesheet
  22 
  23 Deprecation Warning: Using / for division outside of calc() is deprecated and will be remo
  24 ved in Dart Sass 2.0.0.
  25 
  26 Recommendation: math.div($spacer, 2) or calc($spacer / 2)
  27 
  28 More info and automated migrator: https://sass-lang.com/d/slash-div
  29     
  30    ╷
  31 62 │     margin-top: $spacer / 2;
  32    │                 ^^^^^^^^^^^
  33    ╵
  34     ../../contrib/bootstrap_barrio/scss/components/commerce.scss 62:17  @import
  35     ../../contrib/bootstrap_barrio/scss/barrio.scss 8:9                 @import
  36     scss/import.scss 15:9                                               @import
  37     scss/style.scss 7:9                                                 root stylesheet
  38 
  39 Deprecation Warning: Using / for division outside of calc() is deprecated and will be remo
  40 ved in Dart Sass 2.0.0.
  41 
  42 Recommendation: math.div($spacer, 2) or calc($spacer / 2)
  43 
  44 More info and automated migrator: https://sass-lang.com/d/slash-div
  45 
  46    ╷
  47 99 │     padding: $spacer/2 $spacer;
  48    │              ^^^^^^^^^
  49    ╵
  50     ../../contrib/bootstrap_barrio/scss/components/commerce.scss 99:14  @import
  51     ../../contrib/bootstrap_barrio/scss/barrio.scss 8:9                 @import
  52     scss/import.scss 15:9                                               @import
  53     scss/style.scss 7:9                                                 root stylesheet
  54 
  55 Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
  56 
  57 Recommendation: math.div($spacer, 4) or calc($spacer / 4)
  58 
  59 More info and automated migrator: https://sass-lang.com/d/slash-div
  60 
  61 
  62     ╷
  63 110 │     padding: $spacer / 4;
  64     │              ^^^^^^^^^^^
  65     ╵
  66     ../../contrib/bootstrap_barrio/scss/components/commerce.scss 110:14  @import
  67     ../../contrib/bootstrap_barrio/scss/barrio.scss 8:9                  @import
  68     scss/import.scss 15:9                                                @import
  69     scss/style.scss 7:9                                                  root stylesheet
  70 
  71 Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
  72 
  73 Recommendation: math.div($spacer, 2) or calc($spacer / 2)
  74 
  75 More info and automated migrator: https://sass-lang.com/d/slash-div
  76 
  77     ╷
  78 119 │       padding: $spacer/2 $spacer/4 !important;
  79     │                ^^^^^^^^^
  80     ╵
  81     ../../contrib/bootstrap_barrio/scss/components/commerce.scss 119:16  @import
  82     ../../contrib/bootstrap_barrio/scss/barrio.scss 8:9                  @import
  83     scss/import.scss 15:9                                                @import
  84     scss/style.scss 7:9                                                  root stylesheet
  85 
  86 Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
  87 
  88 Recommendation: math.div($spacer, 4) or calc($spacer / 4)
  89 
  90 More info and automated migrator: https://sass-lang.com/d/slash-div
  91 
  92 Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
  93 
  94 Recommendation: math.div($spacer, 4) or calc($spacer / 4)
  95 
  96 More info and automated migrator: https://sass-lang.com/d/slash-div
  97 
  98     ╷
  99 119 │       padding: $spacer/2 $spacer/4 !important;
 100     │                          ^^^^^^^^^
 101     ╵
 102     ../../contrib/bootstrap_barrio/scss/components/commerce.scss 119:26  @import
 103     ../../contrib/bootstrap_barrio/scss/barrio.scss 8:9                  @import
 104     scss/import.scss 15:9                                                @import
 105     scss/style.scss 7:9                                                  root stylesheet
 106 
 107 Warning: 9 repetitive deprecation warnings omitted.
 108 
 109 [16:05:36] Finished 'styles' after 36 s
 110 [16:05:36] Starting 'js'...
 111 [16:05:36] Starting 'serve'...
 112 [Browsersync] Proxying: https://www.drupal.org
 113 [Browsersync] Access URLs:
 114  --------------------------------------
 115        Local: https://localhost:3000
 116     External: https://199.58.80.44:3000
 117  --------------------------------------
 118           UI: http://localhost:3001
 119  UI External: http://localhost:3001
 120  --------------------------------------
 121 [Browsersync] 3 files changed (bootstrap.min.js, popper.min.js, barrio.js)
 122 [16:05:36] Finished 'js' after 349 ms
 123 [Browsersync] Reloading Browsers... (buffered 3 events)

Utiliser CRTL+D pour arrêter gulp.

Débogage

C'est possible que les erreurs vont apparaître avant qu'on puisse utiliser gulp!

Lire les messages d'erreur et suivre les instructions affichées, ou regarder la page du projet (sur npm / github / les docs officielles du projet) pour l'aide.

Erreur potentielle: fichiers non trouvés -- vérifier que le chemin est correct et que le fichier est dans le propre endroit, si un fichier n'existe pas dans le thème de base, vérifier que vous avez installé la propre version de bootstrap_barrrio et bootstrap_sass (et que les versions sont compatibles!)

Erreur potentielle: gulp-sass 5 does not have a default Sass compiler; please set one yourself.

Exemple: 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit
   2 .net/themes/custom/agecvm_saas$ node_modules/gulp/bin/gulp.js
   3 [15:07:29] Using gulpfile /home/agecvm-sftponly/agecvm-dev.dev1.aegir.koumbit.net/themes/c
   4 ustom/agecvm_saas/gulpfile.js
   5 [15:07:29] Starting 'default'...
   6 [15:07:29] Starting 'styles'...
   7 Error in plugin "gulp-sass"
   8 Message:
   9     
  10 gulp-sass 5 does not have a default Sass compiler; please set one yourself.
  11 Both the `sass` and `node-sass` packages are permitted.
  12 For example, in your gulpfile:
  13 
  14   var sass = require('gulp-sass')(require('sass'));
  15 
  16 [15:07:29] The following tasks did not complete: default, styles
  17 [15:07:29] Did you forget to signal async completion?

Réglé avec une modification dans le gulpfile : 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ git diff gulpfile.js
   2 diff --git a/gulpfile.js b/gulpfile.js
   3 index 4c393f1..2401c79 100644
   4 --- a/gulpfile.js
   5 +++ b/gulpfile.js
   6 @@ -1,5 +1,6 @@
   7  let gulp = require('gulp'),
   8 -  sass = require('gulp-sass'),
   9 +//  sass = require('gulp-sass'),
  10 +  sass = require('gulp-sass')(require('sass')),
  11    sourcemaps = require('gulp-sourcemaps'),
  12    $ = require('gulp-load-plugins')(),
  13    cleanCss = require('gulp-clean-css'),

Erreur potentielle: npm WARN A requires a peer of B but none was installed

Configurer git

Créer un .gitignore et initialiser un dépôt git.

Documentation: https://git-scm.com/docs/gitignore

Exemple du .gitignore pour un sous-thème de bootstrap_barrio créer avec le SASS Starterkit: 

   1 color
   2 color/*                    # si présent, on n'a pas besoin de suivre ces fichiers
   3 config
   4 config/                    # on n'a pas besoin de suivre ces fichiers
   5 css
   6 css/*                      # on va suivre les fichiers .scss qui vont générer les feuilles de style en CSS
   7 node_modules
   8 node_modules/*             # c'est important d'installer les dépendances avec `npm install` (selon le fichier package.json)
   9 js/bootstrap.min.js        
  10 js/jquery.min.js           # on n'a pas besoin de suivre le code js de bootstrap
  11 js/popper.min.js


   1 # créer le fichier .gitignore et ajouter les fichiers / répertoires à ignorer
   2 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_sass$ nano .gitignore # ou vim .gitignore
   3 # initialiser le dépôt git
   4 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_sass$ git init
   5 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_sass$ git add *
   6 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_sass$ git commit
   7 # ajouter le dépôt distant de redmine
   8 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_sass$ git remote add origin ssh://git@git.koumbit.net/mon-depot.git

On peut enlever les fichiers qui sont déjà surveiller par git avec git rm --cached nom-du-fichier ou git rm -r --cached nom-du-repertoire

voir: https://stackoverflow.com/questions/9750606/git-still-shows-files-as-modified-after-adding-to-gitignore 

   1 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ git status
   2 On branch master
   3 Your branch is ahead of 'origin/master' by 1 commit.
   4   (use "git push" to publish your local commits)
   5 
   6 Changes not staged for commit:
   7   (use "git add <file>..." to update what will be committed)
   8   (use "git checkout -- <file>..." to discard changes in working directory)
   9 
  10         modified:   css/bootstrap.css
  11         modified:   css/style.css
  12         modified:   js/barrio.js
  13         modified:   js/bootstrap.min.js
  14         modified:   js/popper.min.js
  15 
  16 no changes added to commit (use "git add" and/or "git commit -a")
  17 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ git rm -r --cached css/ js/
  18 rm 'css/bootstrap.css'
  19 rm 'css/style.css'
  20 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ git status
  21 On branch master
  22 Your branch is ahead of 'origin/master' by 1 commit.
  23   (use "git push" to publish your local commits)
  24 
  25 Changes to be committed:
  26   (use "git reset HEAD <file>..." to unstage)
  27 
  28         deleted:    css/bootstrap.css
  29         deleted:    css/style.css
  30 
  31 Changes not staged for commit:
  32   (use "git add <file>..." to update what will be committed)
  33   (use "git checkout -- <file>..." to discard changes in working directory)
  34 
  35         modified:   js/barrio.js
  36         modified:   js/bootstrap.min.js
  37 jaime@dev1:/var/aegir/platforms/Drupal9_2021.12.15/web/sites/agecvm-dev.dev1.aegir.koumbit.net/themes/custom/agecvm_saas$ git commit -m "Enlever les fichiers à ignorer"

ÉquipeWeb/Drupal/Theming/Gulp (last edited 2022-01-05 09:56:42 by jaime)