Installation du frontend

Vous voulez nous aider au développement du frontend ? Installez Node.js et Yarn grâce aux instructions qui suivent !

Installation de Node.js et Yarn

Le frontend de Zeste de Savoir repose sur la version supportée à long terme actuelle de Node.js, la version 8.

L’installation de node est détaillée sur le site de Node.js, soit par téléchargement direct, soit via un gestionnaire de paquet. Zeste de Savoir requiert la version 8.

Alternativement, l’installation de Node.js avec nvm est relativement simple. De plus, nvm permet très facilement de basculer d’une version à une autre.

Yarn peut être installé avec npm i -g yarn ou en suivant ces instructions.

Vérifier que les bonnes versions sont installées

Pour vérifier que Node.js et yarn sont installés (et que vous avez les bonnes versions) :

$ node -v
v8.x.x
$ yarn -v
0.27.x

Si yarn n’est pas installé ou pas à jour, utilisez npm i -g yarn.

Mise à jour de Node.js et Yarn

Pour Yarn, il suffit de le mettre à jour avec cette commande :

$ npm install -g yarn

Pour ce qui est de Node.js, utilisez soit votre gestionnaire de paquet, soit nvm.

Installation des dépendances Yarn

L’installation de Gulp, ainsi que des différentes dépendances et bibliothèques, se fait via Yarn dans le répertoire du projet :

$ make install-front

Ou alors :

$ yarn

Utilisation des outils

Vous avez installé les outils ? Voilà comment on s’en sert dans notre projet !

Note : dans la suite de ce document, les utilisateurs d’OS X et de GNU/Linux préféreront utiliser make, les utilisateurs de Windows qui ne connaissent pas make préféreront utiliser yarn directement.

Présentation de Gulp

Gulp est un outil permettant d’automatiser les tâches liées au front-end. C’est une sorte de Makefile.

Utilisation de Gulp

Gulp se lance avec yarn run gulp -- [tâche][tâche] est la tâche à lancer.

Générer les fichiers avec build

Saisissez la commande suivante (elle vous permet de générer les fichiers Web du site pour vous permettre de consulter Zeste de Savoir sur votre navigateur, en local) :

$ make build-front

Ou alors :

$ yarn run build

build permet de :

  • minimiser les fichiers Javascript et les rassembler en un seul fichier ;
  • compiler les fichiers SCSS pour les transformer CSS ;
  • compresser les images et créer un sprite.

Les fichiers générés sont disponibles dans le dossier dist/ (un aperçu est disponible ici).

Note

C’est la tâche que vous utiliserez sûrement le plus souvent car vous devez la lancer à chaque modification de assets/ !

Si vos modifications n’apparaissent pas dans votre navigateur et que ce n’est pas dû à Gulp, pensez à vider le cache de votre navigateur !

Supprimer les fichiers générés avec clean

clean supprime les fichiers générés par build (il supprime simplement le dossier dist/).

make clean-front ou yarn run clean

Vérifier le code avec lint

lint vérifie, par le biais de JSHint, la forme du code (indentation, doubles guillemets, etc). Si le code ne respecte pas ces règles, le script va sortir une liste d’erreurs (errors) et/ou d’avertissements (warnings) que vous devez corriger.

Note

L’outil d’intégration continue que nous utilisons, Travis CI, fait cette vérification à la création de chaque pull request et sortira la liste des erreurs et des avertissements. Pour éviter d’attendre qu’il ait fini, il est plus pratique pour vous (et nous) que vous lanciez cette commande en amont avec make lint-front` ou ``yarn run test (ou yarn test).

Coder plus simplement avec watch

watch surveille les fichiers SCSS et Javascript lance la tâche build dès qu’ils sont modifiés. C’est très utile pour le développement car ça permet de ne pas avoir à relancer build manuellement. Pour lancer cette commande, faites make watch-front ou yarn run watch. Pour arrêter cette commande, il suffit de presser Ctrl+C.


Voir aussi

Vous voulez en savoir plus ? Venez voir la documentation consacrée au front-end ! ;)

Nettoyage des outils

Désinstaller les dépendances

rm -r node_modules/.