VAIRES-SUR-MARNE For Paris2024

Going to the Base (Path Ideal for bike):

Projet dans sa phase finale

Track seen byFlexible Map:

OSM Plugin Vision

Click title to show track
Neuilly Vaires Bike

 

OpenRunner export:

The project in its  endphase:

What about the base Vaires Torcy Itself ?

 

My Pictures of the Visit to that base on that 2nd of april 2018

Going to Vaire For the 2024 Olympics / Google Photos

Moi à Aulnay ce samedi

Mes performances derrière Gilles:

58 minutes à 2min31s au kilomètre (c’est du Berlin):

avec GPSBabbel:

jpmena@jpmena-300E4A-300E5A-300E7A-3430EA-3530EA:~/Documents/CDRS/Aulnay/31032018JPM$ gpsbabel -i garmin_fit -f 2018-03-31-10-04-45.fit -o gpx -F 2018-03-31-10-04-45.fit.gpx
# on retrouve bien notre fichier gpx (fit est un format binaire donc compressé)
jpmena@jpmena-300E4A-300E5A-300E7A-3430EA-3530EA:~/Documents/CDRS/Aulnay/31032018JPM$ ll
total 304
drwxrwxr-x 2 jpmena jpmena 4096 mars 31 14:15 ./
drwxrwxr-x 3 jpmena jpmena 4096 mars 31 13:33 ../
-rw-r--r-- 1 jpmena jpmena 46688 févr. 3 12:39 2018-02-03-10-14-31.fit
-rw-r--r-- 1 jpmena jpmena 39045 mars 31 13:03 2018-03-31-10-04-45.fit
-rw-rw-r-- 1 jpmena jpmena 210574 mars 31 14:15 2018-03-31-10-04-45.fit.gpx
  • problème il ne prend pas en compte autre chose que vitesse, position

TODO: tester Fitparse library in Python?

Jubilee de mes 50 ans ?

Save the date : Dimanche 13 Mai 2018

Pour quoi faire:

une randonnée /promenade pour fêter mes 50 ans

  1. Je suis né le 8 août 1967 et ai donc passé le cap des 50 ans l’été dernier
  2. Temps pour fêter ce que certains nomment son Jubilée ?
Ponds of Comelle

Où:

En Ile de France quelque part en pleine nature une sortie randonnée ballade entre 16 et 25 km ( choix de la distance qui dernier moment en fonction des participants ) ….

Venez juste avec votre bonne humeur et peut-être une spécialité que nous partagerons lors de la pause pique-nique façon buffet gourmand
Nos emmènerons les boissons

Qui inviter ?

  • Tous ceux qui m’ont accompagnés ces dernières 50 années
  • Randonneurs ou pas …

On prévoit une randonnée avec une pause repas élargie ! (Une randonnée gourmande).
Le lieu de notre pause gourmande sera accessible en voiture et permettra aux moins randonneurs soit de se rendre directement à cette pause, soit de ne faire qu’une moitié du parcours

We shall plan a hike with a large break for a nice common lunch. The place for our lunch will be accessible by car and would allow not so hikers either to come there directly or make only one part of the hike…

Ont répondu présent à ce jour

Liliane ma compagne
Najiba amie de Liliane rencontrée à l’origine sur les sentiers du RIF
Nicolas ami connu lors de mes études d’ingénieur
Frédéric R ami connu lors de mes études d’ingénieur
Sylvie C. amie de Liliane à l’Origine
Yves ami de mes randonnées du RIF

Candidats éventuels à la Randonnée du jubilé

Patrick ami connu lors de mes études d’ingénieur
Martin K. mon maître de stage (now retired)
Yann Collègue de Roller

Plus d’information sur cet événement:

Castle of La Roche Guyon

Je rajouterai plus d’éléments et sur le parcours et sur la logistique très prochainement

Stay tuned….

Les hôtels de Lille

Par rapport au budget décidé par l’administration

(70 €)

L’hôtel IBIS Budget Lille Centre (lien)

  • Réserver tôt sur le site et payer immédiatement
  • Cela permet d’avoir un tarif de l’ordre de 59€ au lieu de 82€ le jour même sur place
    • Avec un petit déjeuner au prix fixe de 6.15 € cela permet de rester dans les frais

Avantages:

  • Au milieu du Vieux Lille
    • Vie animée,
    • gares à proximité

Inconvénients:

  • Vie animée, rue pouvant être bruyante
  • En particulier l’été !!!

L’hôtel B&B Grand Palais (lien)

  • En réservant tôt le prix est descendu à 45 €
  • Le jour même le tarif de la chambre était à 55 €
    • Avec un petit déjeuner au prix fixe de 6.15 € cela permet de rester dans les frais

Avantages:

  • Tarifs stables et raisonnables
  • Quartier nouveau, Bioclimatique
    • Batiment bien isolé et calme (malgré la présence de l’autoroute),
    • Design étonnant et agréable
  • Facile pour arriver en voiture
    • sortie autoroute
    • parking suffisant

Inconvénients:

  • Un peu excentré
    • à pied ce peut être long
  • On n’a plus la vie nocturne du Vieux Lille

TODO à tester

L’appart-hôtel Appart City Grand Palais (lien):

Il est situé juste à côté de l’hôtel B&B Grand Palais ci dessus

Avantages:

  • Les mêmes que précédemment
  • La kitchenette intégrée permet d’être autonome (le soir notamment) !!!
    • Superette G20 toute proche

Inconvénients:

  • Les mêmes que précédemment

Mister Bed Rue de Béthune (lien)

  • Recommandé par le responsable projet
    • car bien situé tout près de la place de la Répulique

Adagio Appart Hotel Lille Vauban (lien):

  • En s’y prenant tôt et en payant directement sur le site un collègue a réussi à avoir la nuit à 60€
  • Il est tout prêt de notre lieu de réunion

A Bootstrap4 video tutorial you shouldn’t miss

Exceptional 50 minutes’ crash course

for developing Bootstrap4 Websites, starting with pure Html5 and NodeJs/Npm. Visual Studio Code is also the speakers’s code editor of choice…

It is also (last but not least) a nice gulp crash course

 

A big part is meant for the use of the components and Bootsstrap4 Classes

The last 7 miintes relates to the sass customisation of our Gulpified Bootstrap SASS / Don’t misss it !!!!

It is the logical achievment of the two preceding main steps !

Enjoy!!!

The Video is accompagnied by the same detailed written tutorial on the course’s page,

Under the Video is a written tutorial:

I found interesting

    • browserSync for reloading automatically the browser and a http-server
    • I should use it in my tests instead of just http-server …
      • you stream, you init it (serve option for the sources), an you reload it
    • The Bootstrap 4.0 documentation is now complete

Séjour Canche Authie

Partie Voyage:

Départ depuis Paris par TGV

  • Paris /  Lille / Calais (Fretin/Tunnel) / Boulogne sur Mer / Etaples / Rang du Fliers (Gare de Berck)
    • Descente en Gare de Etaples !!!

Retour depuis Berck-Plage par Bus puis train Corail:

Partie Résidence:

Chambres hôtes:

  • Première nuit chez Marie Claude Briche  chambre moderne mais espace perso au premier conséquent !!! (Espace partagé par les 2 chambres d’hôtes)
    • Couple de retraités (madame parle pas mal) résidence dans le vert / très calme
  • Seconde nuit au 6 Saint Louis à Berck sur Mer chambres d’hôtes (4 à ( chambres) très bien notées par Tripadvisor (recommandée par Patricia (responsable au Comité de Roller de Seine Saint Denis) dont la maman réside à Berck)
    • David et Jeff sont un couple ayant quitté Londres pour s’établir à Berck sur Mer
    • couple très sympathique et welcoming, l’un parle Français couramment l’autre non, situation idéale pour perfectionner son anglais. Expérience de vie intéressante !!

Autre Chambre d’hôtes intéressante:

Lors d’un séjour précédent nous avons dormi à Boulogne sur Mer à la Bononia 3 chambre d’hôtes près du centre, maison d’hôtes trouvée via les recommandations de Tripadvisor.

  • couple chamant
    • madame travaille à Decathlon – responsable –
    • et monsieur est technicien à Eurotunnel -travail en équipe .
  • au petit déjeuner nous avons rencontré nos voisin de chambrées, 2 couples étrangers de passage
    • 1 couple à la retraite lui anglais de Sheffield elle suédoise : 2 résidence
    • 1  jeune couple avec enfant de la banlieue de Londres (lui informaticien dans une PME travaillant pour Google notamment) elle accro aux smartphones. Ce deuxième couple est resté plutôt entre soi .

PArcours

Parcours Premiers Jour:

Parcours Second Jour:

mon md converti avec GULP

Pre-requis :

Passer le tout en mode décompressé sans cache et en twig debug :

Cf. : http://wiki.jpmena.eu/index.php?title=Php:symfony:twig

Suivre les indication de SI1A sur le site INEA:

Création de feuilles de styles SASS :

On copie le starterKit SASS dans la partie custom dans un nouveau thème custom (bofip_themes/bofip_inea_sass) :

jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/contrib/bootstrap/starterkits\$ cp -pvr sass
/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass
'sass' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass'
'sass/templates' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/templates'
..................................
'sass/scss/style.scss' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/scss/style.scss'
'sass/scss/jquery-ui' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/scss/jquery-ui'
'sass/scss/jquery-ui/_autocomplete.scss' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/scss/jquery-ui/_autocomplete.scss'
'sass/scss/_overrides.scss' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/scss/_overrides.scss'

Les noms de fichiers :

On a renommé les 3 fichiers :

  • cf. les commentaires dans le listage du répertoire
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ ll
total 328
drwxr-xr-x 6 jpmena www-data 4096 févr. 2 15:33 .
drwxrwsr-x 7 jpmena www-data 4096 févr. 2 15:28 ..
# on a renommé THEMENAME.starterkit.yml
-rwxr-xr-x 1 jpmena www-data 652 févr. 2 16:15 bofip_inea_sass.info.yml
# on a renommé THEMENAME.libraries.yml
-rwxr-xr-x 1 jpmena www-data 777 janv. 20 07:14 bofip_inea_sass.libraries.yml
# on a renommé THEMENAME.theme
-rwxr-xr-x 1 jpmena www-data 95 janv. 20 07:14 bofip_inea_sass.theme
drwxr-xr-x 4 jpmena www-data 4096 janv. 20 07:14 config
-rwxr-xr-x 1 jpmena www-data 1150 janv. 20 07:14 favicon.ico
drwxr-xr-x 2 jpmena www-data 4096 janv. 20 07:14 images
-rwxr-xr-x 1 jpmena www-data 1295 janv. 20 07:14 logo.svg
-rwxr-xr-x 1 jpmena www-data 2687 janv. 20 07:14 README.md
-rw-r--r-- 1 jpmena www-data 282955 févr. 2 16:57 screenshot.png
drwxr-xr-x 4 jpmena www-data 4096 janv. 20 07:14 scss
drwxr-xr-x 2 jpmena www-data 4096 janv. 20 07:14 templates

On a renommé également les 2 fichiers suivants :

  • cf. les commentaires dans le listage du répertoire
# on renomme THEMENAME.schema.yml cf ci dessous
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ ll config/schema/
total 12
drwxr-xr-x 2 jpmena www-data 4096 févr.  2 16:17 ./
drwxr-xr-x 4 jpmena www-data 4096 janv. 20 07:14 ../
-rwxr-xr-x 1 jpmena www-data  161 févr.  2 17:53 bofip_inea_sass.schema.yml*
# on renomme THEMENAME.settings.yml cf ci dessous
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ ll config/install/
total 12
drwxr-xr-x 2 jpmena www-data 4096 févr.  2 16:16 ./
drwxr-xr-x 4 jpmena www-data 4096 janv. 20 07:14 ../
-rwxr-xr-x 1 jpmena www-data  749 janv. 20 07:14 bofip_inea_sass.settings.yml*

Le contenu de certains fichiers :

Le contenu du fichier bofip_inea_sass.info.yml …

  • cf. les commentaires que j’ai ajoutés
core: 8.x
type: theme
base theme: bootstrap

# changement du name et de description pour proposer
# quelque code de parlant à l'interface d'administration
name: 'BOFIP SI1A SASS'
description: 'Thème Refonte BOFIP basé la déclinaison SASS by SI1A http://venezia.appli.dgfip/www/inea-outils/inea/index.html (recette à base de Bootstrap3 / SASS).'
package: 'Bootstrap'

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

# changement de THEMENAME à bofip_inea_sass (nom actuel de mon thème)
##  pour les références ci dessous !!!
libraries:
  - 'bofip_inea_sass/global-styling'
  - 'bofip_inea_sass/bootstrap-scripts'

Le contenu du fichier config/schema/bofip_inea_sass.schema.yml …

# Schema for the theme setting configuration file of the THEMETITLE theme.
## changer le label ci dessous ('THEMETITLE settings' dans le Kis SASS) pour un label unique sur tous les projets drupal embarqués par mon instance
bofip_inea_sass.settings:
  type: theme_settings
  label: 'bofip_inea_sass settings'

Placement des sources INEA SASS

récupération des source via git

  • récupération des sources Venezia via git à la racine de mon projet:
    • à la date du 14/02/2018 le dernier Tag est le inea-0.0.18
# récupération du repo complet
pmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ git clone http://venezia.appli.dgfip/anonscm/git/inea/inea.git
Clonage dans 'inea'...
Vérification de la connectivité... fait.
# on rentre dans le projet git inea local
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ cd inea/
# on récupère le dernier tag de ce projet:
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/inea$ git tag --sort=taggerdate | tail -1
inea-0.0.18
# on récupère un tag particulier le dernier ...
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/inea$ git checkout tags/inea-0.0.18
Note: checking out 'tags/inea-0.0.18'.

You are in 'detached HEAD' state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

  git checkout -b <new-branch-name>

HEAD est maintenant sur 9e449b5... [maven-release-plugin](bjoanne)prepare release inea-0.0.18

Adaptation de la configuration yaml

  • On adapte le fichier .info.yml pour lui demander de pointer vers des scripts js de la famille inea-scripts
core: 8.x
type: theme
base theme: bootstrap

name: 'BOFIP SI1A SASS'
description: 'Thème Refonte BOFIP basé la déclinaison SASS by SI1A http://venezia.appli.dgfip/www/inea-outils/inea/index.html (recette à base de Bootstrap3 / SASS).'
package: 'Bootstrap'

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

## ce ne sont plus les bootstrap-script
libraries:
  - 'bofip_inea_sass/global-styling'
  - 'bofip_inea_sass/inea-scripts'
  • Dans le .libraries.yml, on définit ces inea-scripts en lieu et place des bootstrap-scripts
    • à partir des ressources désormais présentes sous bofip_inea_sass/inea/js
    • à l’exception de la lirairie bootstrap.js apportée au bon endroit par le projet Bootstrap Library de Drupal
    • ( ToDO si nécessaire remplacer le fichier web/libraries/bootstrap/js/bootstrap.js par web/themes/custom/bofip_themes/bofip_inea_sass/inea/js/bootstrap.js
    • il s’agit chaque fois de la version 3.3.7 du framework Bootstrap)
global-styling:
  css:
    theme:
      dist/css/style.css: {}

inea-scripts:
  js:
    inea/js/jquery-ui.js: {}
    inea/js/datepicker-jquery-ui.js: {}
    inea/js/inea.js: {}

le fichier principal bofip_inea_sass/scss/style.scss

  • Il importe:
    • comme pour bofip_bootstrap_sass/scss/style.scss
      • _default-variables.scss
      • _overrides.scss
    • inea/sass/inea.scss sous la forme @import inea (via le PATH ‘${ineaSass}’ ajouté lors de la compilation sass vers css)
      • Ce dernier importe les librairies Bootstrap (_bootstrap.scss via @import bootstrap et bootstrap/*/.scss via @import ‘bootstrap/*’ )
        • grâce notamment au PATH ‘${bootstrapSass}’ ajouté lors de la compilation sass vers css

Prérequis NodeJS/npm présents sur le poste:

Installation de la dernière version Node JS/npm

  • Télécharger la dernière version Node JS/Npm
  • La détarer et ajouter le répertoire des binaires dans le PATH Linux
    • et on teste la prise en compte !!!
# je l'ai téléchargé dans un sous-répertoire Ateliers de mon $HOME
jpmena@jpmena-HP-ProDesk-600-G2-MT:~/Ateliers$ ls -ltr | tail -1
-rw-rw-r--  1 jpmena jpmena  11410120 févr. 13 08:02 node-v8.9.4-linux-x64.tar.xz
# On dé-tare
jpmena@jpmena-HP-ProDesk-600-G2-MT:~/Ateliers$ tar xf node-v8.9.4-linux-x64.tar.xz
# on ajoute le chemin du répertoire des binaires node et npm dans le PATH
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ tail -3 .profile
# set PATH so it includes user's private bin directories
NODE_HOME=$HOME/Ateliers/node-v8.9.4-linux-x64
PATH="$NODE_HOME/bin:$HOME/bin:$HOME/.local/bin:$PATH"
# On teste la prise en compte de ce chemin
## on active la nouvelle configuration
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ source .profile
## On vérifie la version de Node
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ node --version
v8.9.4
## On vérifie la version de npm
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ npm --version
5.6.0

installation du client Gulp

  • La page d’accueil du projet Gulp nous présente un écran avec les 4 commandes à passer
# Installation du client Gulp (global '-g' à mon utilisateur) 
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ npm install gulp-cli -g
/home/jpmena/Ateliers/node-v8.9.4-linux-x64/bin/gulp -> /home/jpmena/Ateliers/node-v8.9.4-linux-x64/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@2.0.1
added 244 packages in 12.06s
# vérification
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ gulp --version
[08:17:32] CLI version 2.0.1
#liste des commandes gulp disponibles:
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ gulp --help

Usage: gulp [options] tasks

Options:
  --help, -h              Show this help.                              [booléen]
  --version, -v           Print the global and local gulp versions.    [booléen]
  --require               Will require a module before running the gulpfile.
                          This is useful for transpilers but also has other
                          applications.                    [chaine de caractère]
  --gulpfile, -f          Manually set path of gulpfile. Useful if you have
                          multiple gulpfiles. This will set the CWD to the
                          gulpfile directory as well.      [chaine de caractère]
  --cwd                   Manually set the CWD. The search for the gulpfile, as
                          well as the relativity of all requires will be from
                          here.                            [chaine de caractère]
  --verify                Will verify plugins referenced in project's
                          package.json against the plugins blacklist.
  --tasks, -T             Print the task dependency tree for the loaded
                          gulpfile.                                    [booléen]
  --tasks-simple          Print a plaintext list of tasks for the loaded
                          gulpfile.                                    [booléen]
  --tasks-json            Print the task dependency tree, in JSON format, for
                          the loaded gulpfile.
  --tasks-depth, --depth  Specify the depth of the task dependency tree.[nombre]
  --compact-tasks         Reduce the output of task dependency tree by printing
                          only top tasks and their child tasks.        [booléen]
  --sort-tasks            Will sort top tasks of task dependency tree. [booléen]
  --color                 Will force gulp and gulp plugins to display colors,
                          even when no color support is detected.      [booléen]
  --no-color              Will force gulp and gulp plugins to not display
                          colors, even when color support is detected. [booléen]
  --silent, -S            Suppress all gulp logging.                   [booléen]
  --continue              Continue execution of tasks upon failure.    [booléen]
  --series                Run tasks given on the CLI in series (the default is
                          parallel).                                   [booléen]
  --log-level, -L         Set the loglevel. -L for least verbose and -LLLL for
                          most verbose. -LLL is default.              [comptage]

Création d’une GulpFile à la racine de notre thème

  • On reprend du GulpFile.js du projet INEA la partie spécifique à la compilation SASS
    • on le pose à la racine de notre thème !!!
    • On laisse de côté la génération KSS (documentation automatique des composants Bootstrap de la charte)
    • Dans ce projet les répertoire js, fonts et css sont dans un sour répertoire dist ce qui donne
'use strict';

const process = require('process');
const path = require('path');
const fs = require('fs');
const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const sass = require('gulp-sass');

const dist = 'dist';

const srcJs = 'inea/js';
const bootstrapJs = 'inea/assets/javascripts';
const distJs = 'dist/js';

const srcSass = 'scss';
const ineaSass = 'inea/sass';
const bootstrapSass = 'inea/assets/stylesheets';
const distCss = 'dist/css';

const srcFonts = 'inea/fonts';
const bootstrapFonts = 'inea/assets/fonts';
const distFonts = 'dist/fonts';

const srcImages = 'inea/img';
const distImages = 'dist/img';

/*
 * La compilation SASS vers CSS
 * noter que l'on a mis dans le PATH
 * l'accès aux sources Bootstrap et 
 * celui aux sources INEA comme 
 * expliqué dans le schéma sous CREATION.md
 */ 
gulp.task('css', function () {
  return gulp.src(`${srcSass}/style.scss`)
      .pipe(sourcemaps.init())
      .pipe(sass({
        errLogToConsole: true,
        includePaths: [`${ineaSass}/`,`${bootstrapSass}/`],
        precision: 8
      }))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(distCss));
});

gulp.task('js', function () {
  return gulp.src(`${srcJs}/**/*`)
      .pipe(gulp.dest(distJs));
});

gulp.task('fonts', function () {
  return gulp.src([`${srcFonts}/**/*`, `${bootstrapFonts}/**/*`])
      .pipe(gulp.dest(distFonts));
});

gulp.task('img', function () {
  return gulp.src(`${srcImages}/**/*`)
      .pipe(gulp.dest(distImages));
});

gulp.task('dist', ['css', 'js', 'fonts', 'img']);
  • on adapte le fichier *.libraries.yml our pointer vers le css/inea.css généré
global-styling:
  css:
    theme:
      dist/css/inea.css: {}

inea-scripts:
  js:
    inea/js/jquery-ui.js: {}
    inea/js/datepicker-jquery-ui.js: {}
    inea/js/inea.js: {}
  • on adapte aussi le fichier .gitignore pour exclure le répertoire dist des sources

création d’un package.json qui permet de charger les bibliothèques dont Gulp a besoin

  • on initialise un fichier package.json
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (bofip_inea_sass) #on répond aux différentes questions (souvent valeurs par défaut) 
....... 
  • Ajout des librairies qui sont appelées (required) par le fichier gulpfile.js:
    • on passe les commandes npm require qui vont bien
# on installe gulp et le mémorise dans les dépendances de développement
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ npm install gulp --save-dev
......................................

+ gulp@3.9.1
added 274 packages in 11.468s
# on installe l'interfaces sass pour gulp et le mémorise dans les dépendances de développement
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/cbofip_inea_sass$ npm install gulp-sass --save-dev
............................................................
+ gulp-sass@3.1.0
added 173 packages in 11.924s
# on installe l'interfaces sass gulp-sourcemap et le mémorise dans les dépendances de développement
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ npm install gulp-sourcemaps --save-dev
.........................
+ gulp-sourcemaps@2.6.4
added 30 packages in 4.898s
  • le résultat dans mon cas est un fichier package.json à la racine de mon thème et qui contient
    • Pour réinstaller toutes les librairies nécessaires à partir de ce fichier un npm install sera suffisant
{
  "name": "bofip_inea_sass",
  "version": "0.0.1",
  "description": "Compilation des assets",
  "main": "gulpfile.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "sass"
  ],
  "author": "JPmena",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.4"
  }
}
  • on adapte aussi le fichier .gitignore pour exclure le répertoire node_modules des sources

lancement de la compilation manuelle

  • Lancement de la tâche css
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ gulp css
[10:53:09] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass/gulpfile.js
[10:53:09] Starting 'css'...
[10:53:09] Finished 'css' after 219 ms
  • on a bien un répertoire créé dist/css qui n’existait pas avant
    • bien sûr, dist fait partie du .gitignore !!!
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ gulp css
[14:31:10] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/gulpfile.js
[14:31:10] Starting 'css'...
[14:31:10] Finished 'css' after 276 ms
  • On peut aussi appeler la tache ‘dist’
    • qui actuellement, oûtre la tache ‘css’ (dépend de la tâche css) …
    • … appelle les autres tâches js, font, img dans l’ordre que décide le compilateur
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ gulp dist
[14:31:31] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass/gulpfile.js
[14:31:31] Starting 'css'...
[14:31:31] Starting 'js'...
[14:31:31] Starting 'fonts'...
[14:31:31] Starting 'img'...
[14:31:31] Finished 'js' after 36 ms
[14:31:31] Finished 'img' after 43 ms
[14:31:31] Finished 'fonts' after 46 ms
[14:31:31] Finished 'css' after 289 ms
[14:31:31] Starting 'dist'...
[14:31:31] Finished 'dist' after 31 μs

Le répertoire dist généré:

  • Actuellement il y a sou dist plusieurs sous répertoires de ressources disponibles sour le projet
    • dist/css : le css BOFIP + INEA + Bootstrap
    • dist/js : les ressources Javascript INEA + Bootstrap
    • dist/fonts: les fonts et les font-icons: INEA + Bootstrap
    • dist/img: le logo DGFIP et celui d’attente + Les logos JQueryUI (png ou gif)
# on vérifie que dans le style on retrouve la partie bootstrap et inea (le css.map liste les feuilles scss appelées !!!)  
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ ll dist/css/
total 1508
drwxrwsr-x 2 jpmena www-data    4096 févr. 15 11:12 ./
drwxrwsr-x 6 jpmena www-data    4096 févr. 15 11:12 ../
-rw-rw-r-- 1 jpmena www-data  489299 févr. 15 14:31 style.css
-rw-rw-r-- 1 jpmena www-data 1040396 févr. 15 14:31 style.css.map
# on retrouve les librairies javascript apportées par inea
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ ll dist/js
total 624
drwxrwsr-x 2 jpmena www-data   4096 févr. 15 11:12 ./
drwxrwsr-x 6 jpmena www-data   4096 févr. 15 11:12 ../
-rw-rw-r-- 1 jpmena www-data  72964 févr. 15 14:31 bootstrap.js
-rw-rw-r-- 1 jpmena www-data   2006 févr. 15 14:31 datepicker-jquery-ui.js
-rw-rw-r-- 1 jpmena www-data  26222 févr. 15 14:31 inea.js
-rw-rw-r-- 1 jpmena www-data 520714 févr. 15 14:31 jquery-ui.js
# on retrouve les fonts - et les icônes associées - apportées par inea (qui importe aussi la partie bootstrap)
## noter les sous-répertoire bootstrap et dgfip
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ ll dist/fonts/
total 24
drwxrwsr-x 6 jpmena www-data 4096 févr. 15 13:47 ./
drwxrwsr-x 6 jpmena www-data 4096 févr. 15 11:12 ../
drwxrwxr-x 2 jpmena www-data 4096 févr. 15 11:12 bootstrap/
drwxrwxr-x 2 jpmena www-data 4096 févr. 15 13:47 dgfip/
drwxrwxr-x 2 jpmena www-data 4096 févr. 15 13:47 droidsans/
drwxrwxr-x 2 jpmena www-data 4096 févr. 15 13:47 opensans/
# on retrouve les icônes dgfip dans les formats png, ico (pour le favicon du site) et gif
## noter le sous-répertoire ui-jquery qui embarque les icônes de la partie JQuery
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_inea_sass$ ll dist/img/
total 64
drwxrwsr-x 3 jpmena www-data 4096 févr. 15 11:12 ./
drwxrwsr-x 6 jpmena www-data 4096 févr. 15 11:12 ../
-rw-rw-r-- 1 jpmena www-data 5663 févr. 15 14:31 favicon-114.png
-rw-rw-r-- 1 jpmena www-data 5217 févr. 15 14:31 favicon-120.png
-rw-rw-r-- 1 jpmena www-data 5599 févr. 15 14:31 favicon-144.png
-rw-rw-r-- 1 jpmena www-data 4429 févr. 15 14:31 favicon-152.png
-rw-rw-r-- 1 jpmena www-data 2620 févr. 15 14:31 favicon-57.png
-rw-rw-r-- 1 jpmena www-data 3185 févr. 15 14:31 favicon-72.png
-rw-rw-r-- 1 jpmena www-data 2238 févr. 15 14:31 favicon.ico
-rw-rw-r-- 1 jpmena www-data 6820 févr. 15 14:31 loadingcharte.gif
drwxrwxr-x 2 jpmena www-data 4096 févr. 15 11:12 ui-jquery/

#Tests:

  • Mise en place de la nouvelle charte sous

Tests plus approfondis: cf. le TEST.md de ce même répertoire

Mon md converti avec Pandoc

Pre-requis :

Passer le tout en mode décompressé sans cache et en twig debug :

Suivre les indication de SI1A sur le site INEA:

On copie le starterKit SASS dans la partie custom dans un nouveau thème custom (bofip_themes/bofip_bootstrap_sass) :

jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/contrib/bootstrap/starterkits$ cp -pvr sass /var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass
'sass' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass'
'sass/templates' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass/templates'
………………………………………………………………...
'sass/scss/style.scss' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass/scss/style.scss'
'sass/scss/jquery-ui' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass/scss/jquery-ui'
'sass/scss/jquery-ui/_autocomplete.scss' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass/scss/jquery-ui/_autocomplete.scss'
'sass/scss/_overrides.scss' -> '/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass/scss/_overrides.scss'   

Les noms de fichiers :

On a renommé les 3 fichiers :

  • cf. les commentaires dans le listage du répertoire
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ ll
total 424
drwxr-xr-x 7 jpmena www-data   4096 févr. 12 10:37 ./
drwxrwsr-x 7 jpmena www-data   4096 févr.  2 15:28 ../
# on a renommé THEMENAME.starterkit.yml
-rwxr-xr-x 1 jpmena www-data    614 févr.  2 16:11 bofip_bootstrap_sass.info.yml*
# on a renommé THEMENAME.libraries.yml
-rwxr-xr-x 1 jpmena www-data    777 janv. 20 07:14 bofip_bootstrap_sass.libraries.yml*
# on a renommé THEMENAME.theme
-rwxr-xr-x 1 jpmena www-data     95 janv. 20 07:14 bofip_bootstrap_sass.theme*
drwxr-xr-x 4 jpmena www-data   4096 janv. 20 07:14 config/
drwxrwxr-x 2 jpmena jpmena     4096 févr. 12 09:21 docs/
-rwxr-xr-x 1 jpmena www-data   1150 janv. 20 07:14 favicon.ico*
drwxr-xr-x 2 jpmena www-data   4096 janv. 20 07:14 images/
-rwxr-xr-x 1 jpmena www-data   1295 janv. 20 07:14 logo.svg*
-rwxr-xr-x 1 jpmena www-data   2687 janv. 20 07:14 README.md*
-rw-r--r-- 1 jpmena www-data 378677 févr.  2 16:57 screenshot.png
drwxr-xr-x 4 jpmena www-data   4096 janv. 20 07:14 scss/
drwxr-xr-x 2 jpmena www-data   4096 janv. 20 07:14 templates/

On a renommé également les 2 fichiers du sous-répertoire config :

  • cf. les commentaires dans le listage des répertoires
# on renomme THEMENAME.schema.yml cf ci dessous
pmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ ll config/schema/
total 12
drwxr-xr-x 2 jpmena www-data 4096 févr.  2 16:12 ./
drwxr-xr-x 4 jpmena www-data 4096 janv. 20 07:14 ../
-rwxr-xr-x 1 jpmena www-data  171 févr.  2 17:52 bofip_bootstrap_sass.schema.yml*
# on renomme THEMENAME.settings.yml cf ci dessous
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ ll config/install/
total 12
drwxr-xr-x 2 jpmena www-data 4096 févr.  2 16:12 ./
drwxr-xr-x 4 jpmena www-data 4096 janv. 20 07:14 ../
-rwxr-xr-x 1 jpmena www-data  749 janv. 20 07:14 bofip_bootstrap_sass.settings.yml*

Adaptations du contenu de certains fichiers :

Le contenu du fichier bofip_bootstrap_sass.info.yml …

  • cf. les commentaires que j’ai ajoutés
core: 8.x
type: theme
base theme: bootstrap

# changement du name et de description pour proposer
# quelque code de parlant à l'interface d'administration
name: 'BOFIP SASS'
description: 'Thème BOFIP basé les sur le Kit BootStrap3/SASS - https://github.com/twbs/bootstrap-sass (not for beginners).'
package: 'Bootstrap'

regions:
  navigation: 'Navigation'
  navigation_collapsible: 'Navigation (Collapsible)'
  header: 'Top Bar'
  highlighted: 'Highlighted'
  help: 'Help'
  content: 'Content'
  sidebar_first: 'Primary'
  sidebar_second: 'Secondary'
  footer: 'Footer'
  page_top: 'Page top'
  page_bottom: 'Page bottom'

# changement de THEMENAME à bofip_inea_sass (nom actuel de mon thème)
##  pour les références ci dessous !!!
libraries:
  - 'bofip_bootstrap_sass/global-styling'
  - 'bofip_bootstrap_sass/bootstrap-scripts'
  
core: 8.x
type: theme
base theme: bootstrap

Le contenu du fichier config/schema/bofip_bootstrap_sass …

# Schema for the theme setting configuration file of the THEMETITLE theme.
## changer le label ci dessous ('THEMETITLE settings' dans le Kis SASS) pour un label unique sur tous les projets drupal embarqués par mon instance
# Schema for the theme setting configuration file of the THEMETITLE theme.

bofip_bootstrap_sass.settings:
  type: theme_settings
  label: 'bofip_bootstrap_sass settings'

Ajouter les librairies Booststrap SASS

Ressources

Placement des sources Booststrap SASS

# on détarre l'archive Github au bon endroit
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom$ tar xf bootstrap-sass-3.3.7.tar.gz -C bofip_themes/bofip_bootstrap_sass/
# on renomme le répertoire
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom$ cd bofip_themes/bofip_bootstrap_sass/
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ mv -v bootstrap-sass-3.3.7 bootstrap
'bootstrap-sass-3.3.7' -> 'bootstrap'

Sources javascript

  • Le fichier bofip_bootstrap_sass/bofip_bootstrap_sass.libraries.yml fait référence aux sources javascript de Bootstrap à travers le chemin relatif: bootstrap/assets/javascripts/bootstrap
bootstrap-scripts:
  js:
    bootstrap/assets/javascripts/bootstrap/affix.js: {}
    bootstrap/assets/javascripts/bootstrap/alert.js: {}
    bootstrap/assets/javascripts/bootstrap/button.js: {}
    bootstrap/assets/javascripts/bootstrap/carousel.js: {}
    bootstrap/assets/javascripts/bootstrap/collapse.js: {}
    bootstrap/assets/javascripts/bootstrap/dropdown.js: {}
    bootstrap/assets/javascripts/bootstrap/modal.js: {}
    bootstrap/assets/javascripts/bootstrap/tooltip.js: {}
    bootstrap/assets/javascripts/bootstrap/popover.js: {}
    bootstrap/assets/javascripts/bootstrap/scrollspy.js: {}
    bootstrap/assets/javascripts/bootstrap/tab.js: {}
    bootstrap/assets/javascripts/bootstrap/transition.js: {}
  • noter que l’ajout de ces fichiers Javascripts suppose la présence de la librairie Bootstrap.js qui, si elle n’est pas à récupérer du CDN peut se faire localement grâce au projet Bootstrap Library

Sources SASS:

  • Le répertoire récupéré du KIT SASS ne vient pas vide:
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ ll scss
total 28
drwxr-xr-x 4 jpmena www-data 4096 janv. 20 07:14 ./
drwxr-xr-x 8 jpmena www-data 4096 févr. 12 13:40 ../
drwxr-xr-x 2 jpmena www-data 4096 janv. 20 07:14 component/
-rw-r--r-- 1 jpmena www-data  542 janv. 20 07:14 _default-variables.scss
drwxr-xr-x 2 jpmena www-data 4096 janv. 20 07:14 jquery-ui/
-rw-r--r-- 1 jpmena www-data 1254 janv. 20 07:14 _overrides.scss
-rw-r--r-- 1 jpmena www-data  176 janv. 20 07:14 style.scss

le fichier principal scss/style.scss

  • c’est le fichier SASS principal:
    • Il inclue *_default-variables.scss* et *_overrides.scss* (cf. contenu ci après)
// Default variables.
@import "default-variables";

// Bootstrap Framework.
@import '../bootstrap/assets/stylesheets/bootstrap';

// Base-theme overrides.
@import 'overrides';
  • on voit qu’il inclue les source sass de bootstrap (cf. placement juste ci dessus des sources bootstrap), le fichier _bofip_bootstrap_sass/bootstrap/assets/stylesheets/bootstrap.scss fait appel par défaut à toutes les ressources sass bootstrap:
    • La difficulté sera dans un second temps (quand le projet sera plus avancé) de définir un tel fichier *scss/_booststrap.scss* dans nos sources scss ramené aux imports minimaux !!!
    • et de l’inclure dans notre scss/style.scss en lieu et place de *bootstrap/assets/stylesheets/_bootstrap.scss*
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
@import "bootstrap/normalize";
@import "bootstrap/print";
@import "bootstrap/glyphicons";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
..................................
@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
@import "bootstrap/popovers";
@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";
  • Le fichier scss/style.scss est le fichier que l’outillage va compiler en css/style.css
    • en effet bofip_bootstrap_sass/bofip_bootstrap_sass.libraries.yml y fait référence (cf. contenu ci après):
global-styling:
  css:
    theme:
      css/style.css: {} # c'est le fichier résultant de la compilation de scss/style.scss   

le fichier *scss/_default-variables.scss*

  • Il est importé par style.scss et doit :
  • permettre de redéfinir les variables présentes sous *../bootstrap/assets/stylesheets/bootstrap/_variables.scss*
    • les variables de ce fichier sont sufixées par !default;
    • ce qui signifie qu’elles s’imposent uniquement si elle n’ont pas été défini auparant (sans le !default; bien sûr)!!!
    • c’est à ce niveau qu’intervient notre fichier *scss/_default-variables.scss*
  • Un exemple de son usage nous est donné dans le contenu livré par le KitSASS:

« scss /** * Default Variables. * * Modify this file to provide default Bootstrap Framework variables. The * Bootstrap Framework will not override any variables defined here because it * uses the!default` flag which will only set their default if not already * defined here. You can copy existing variables directly from the following file: * ./THEMENAME/bootstrap/assets/stylesheets/bootstrap/_variables.scss */

// Set the proper directory for the Bootstrap Glyphicon font. $icon-font-path: ‘../bootstrap/assets/fonts/bootstrap/’; « `

le fichier *scss/_overrides.scss*

  • Il est importé par style.scss et est chargé
    • d’apporter la customisation Bootstrap par rapport aux spécificités de Drupal 8
  • Il n’est pas vide et son contenu fait appel aux fichiers sass présents sous scss/component

mise en place de l’outillage SASS / Gulp

Prérequis: installation d’un compilateur SASS

# installation du paquet ruby-sass par apt 
## il installe autmatiquement ruby et les Gem qui vont bien pour la compilation SASS
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ sudo apt install ruby-sass
[sudo] Mot de passe de jpmena : 
...................
# on vérifie
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ sass --version
Sass 3.4.21 (Selective Steve)
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ whereis sass
sass: /usr/bin/sass /usr/share/man/man1/sass.1.gz
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ ll /usr/bin/sass
-rwxr-xr-x 1 root root 142 janv. 25  2016 /usr/bin/sass*
  • /usr/bin/sass est un script Ruby !!!
#!/usr/bin/ruby
# The command line Sass parser.

require 'sass'
require 'sass/exec'

opts = Sass::Exec::SassScss.new(ARGV, :sass)
opts.parse!

Prérequis NodeJS/npm présents sur le poste:

Installation de la dernière version Node JS/npm

  • Télécharger la dernière version Node JS/Npm
  • La détarer et ajouter le répertoire des binaires dans le PATH Linux
    • et on teste la prise en compte !!!

bash # je l'ai téléchargé dans un sous-répertoire Ateliers de mon $HOME jpmena@jpmena-HP-ProDesk-600-G2-MT:~/Ateliers$ ls -ltr | tail -1 -rw-rw-r-- 1 jpmena jpmena 11410120 févr. 13 08:02 node-v8.9.4-linux-x64.tar.xz # On dé-tare jpmena@jpmena-HP-ProDesk-600-G2-MT:~/Ateliers$ tar xf node-v8.9.4-linux-x64.tar.xz # on ajoute le chemin du répertoire des binaires node et npm dans le PATH jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ tail -3 .profile # set PATH so it includes user's private bin directories NODE_HOME=$HOME/Ateliers/node-v8.9.4-linux-x64 PATH="$NODE_HOME/bin:$HOME/bin:$HOME/.local/bin:$PATH" # On teste la prise en compte de ce chemin ## on active la nouvelle configuration jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ source .profile ## On vérifie la version de Node jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ node --version v8.9.4 ## On vérifie la version de npm jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ npm --version 5.6.0

installation du client Gulp

  • La page d’accueil du projet Gulp nous présente un écran avec les 4 commandes à passer
# Installation du client Gulp (global '-g' à mon utilisateur) 
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ npm install gulp-cli -g
/home/jpmena/Ateliers/node-v8.9.4-linux-x64/bin/gulp -> /home/jpmena/Ateliers/node-v8.9.4-linux-x64/lib/node_modules/gulp-cli/bin/gulp.js
+ gulp-cli@2.0.1
added 244 packages in 12.06s
# vérification
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ gulp --version
[08:17:32] CLI version 2.0.1
#liste des commandes gulp disponibles:
jpmena@jpmena-HP-ProDesk-600-G2-MT:~$ gulp --help

Usage: gulp [options] tasks

Options:
  --help, -h              Show this help.                              [booléen]
  --version, -v           Print the global and local gulp versions.    [booléen]
  --require               Will require a module before running the gulpfile.
                          This is useful for transpilers but also has other
                          applications.                    [chaine de caractère]
  --gulpfile, -f          Manually set path of gulpfile. Useful if you have
                          multiple gulpfiles. This will set the CWD to the
                          gulpfile directory as well.      [chaine de caractère]
  --cwd                   Manually set the CWD. The search for the gulpfile, as
                          well as the relativity of all requires will be from
                          here.                            [chaine de caractère]
  --verify                Will verify plugins referenced in project's
                          package.json against the plugins blacklist.
  --tasks, -T             Print the task dependency tree for the loaded
                          gulpfile.                                    [booléen]
  --tasks-simple          Print a plaintext list of tasks for the loaded
                          gulpfile.                                    [booléen]
  --tasks-json            Print the task dependency tree, in JSON format, for
                          the loaded gulpfile.
  --tasks-depth, --depth  Specify the depth of the task dependency tree.[nombre]
  --compact-tasks         Reduce the output of task dependency tree by printing
                          only top tasks and their child tasks.        [booléen]
  --sort-tasks            Will sort top tasks of task dependency tree. [booléen]
  --color                 Will force gulp and gulp plugins to display colors,
                          even when no color support is detected.      [booléen]
  --no-color              Will force gulp and gulp plugins to not display
                          colors, even when color support is detected. [booléen]
  --silent, -S            Suppress all gulp logging.                   [booléen]
  --continue              Continue execution of tasks upon failure.    [booléen]
  --series                Run tasks given on the CLI in series (the default is
                          parallel).                                   [booléen]
  --log-level, -L         Set the loglevel. -L for least verbose and -LLLL for
                          most verbose. -LLL is default.              [comptage]

Création d’une GulpFile à la racine de notre thème

  • On reprend du GulpFile.js du projet INEA la partie spécifique à la compilation SASS
    • On laisse de côté la génération KSS (documentation automatique des composants Bootstrap de la charte)
    • Dans ce projet les répertoire js, fonts et css sont dans un sour répertoire dist
      • on adapte le fichier _*.libraries.yml_ « `yaml global-styling: css: theme: dist/css/style.css: {}

bootstrap-scripts: js: bootstrap/assets/javascripts/bootstrap/affix.js: {} bootstrap/assets/javascripts/bootstrap/alert.js: {} bootstrap/assets/javascripts/bootstrap/button.js: {} bootstrap/assets/javascripts/bootstrap/carousel.js: {} bootstrap/assets/javascripts/bootstrap/collapse.js: {} bootstrap/assets/javascripts/bootstrap/dropdown.js: {} bootstrap/assets/javascripts/bootstrap/modal.js: {} bootstrap/assets/javascripts/bootstrap/tooltip.js: {} bootstrap/assets/javascripts/bootstrap/popover.js: {} bootstrap/assets/javascripts/bootstrap/scrollspy.js: {} bootstrap/assets/javascripts/bootstrap/tab.js: {} bootstrap/assets/javascripts/bootstrap/transition.js: {} « ` * on adapte aussi le fichier .gitignore pour exclure le répertoire dist des sources

création d’un package.json qui permet de charger les bibliothèques dont Gulp a besoin

  • on initialise un fichier package.json
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (bofip_bootstrap_sass) #on répond aux différentes questions (souvent valeurs par défaut) 
....... 
  • Ajout des librairies qui sont appelées (required) par le fichier gulpfile.js:
    • on passe les commandes npm require qui vont bien
# on installe gulp et le mémorise dans les dépendances de développement
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ npm install gulp --save-dev
......................................

+ gulp@3.9.1
added 274 packages in 11.468s
# on installe l'interfaces sass pour gulp et le mémorise dans les dépendances de développement
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ npm install gulp-sass --save-dev
............................................................
+ gulp-sass@3.1.0
added 173 packages in 11.924s
# on installe l'interfaces sass gulp-sourcemap et le mémorise dans les dépendances de développement
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ npm install gulp-sourcemaps --save-dev
.........................
+ gulp-sourcemaps@2.6.4
added 30 packages in 4.898s
  • le résultat dans mon cas est un fichier package.json à la racine de mon thème et qui contient
    • Pour réinstaller toutes les librairies nécessaires à partir de ce fichier un npm install sera suffisant
{
  "name": "bofip_bootstrap_sass",
  "version": "0.0.1",
  "description": "Compilation des assets",
  "main": "gulpfile.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "gulp",
    "sass"
  ],
  "author": "JPmena",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.4"
  }
}
  • on adapte aussi le fichier .gitignore pour exclure le répertoire node_modules des sources

lancement de la compilation

  • Lancement de la tâche css
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ gulp css
[10:53:09] Using gulpfile /var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass/gulpfile.js
[10:53:09] Starting 'css'...
[10:53:09] Finished 'css' after 219 ms
  • on a bien un répertoire créé dist/css qui n’existait pas avant
    • bien sûr, dist fait partie du .gitignore !!!
jpmena@jpmena-HP-ProDesk-600-G2-MT:/var/www/bofiptest/web/themes/custom/bofip_themes/bofip_bootstrap_sass$ ls -ltr dist/css/
total 588
-rw-rw-r-- 1 jpmena jpmena 433069 févr. 13 10:53 style.css.map
-rw-rw-r-- 1 jpmena jpmena 166192 févr. 13 10:53 style.css

compilation manuelle

Aulnay ce samedi ….

Ma trace (avec Yann, Solène et Hervé)

 

Un court moment: