Installation du frontend¶
Vous voulez nous aider au développement du frontend ? Installez Node.js et npm grâce aux instructions qui suivent !
Installation de Node.js et npm¶
Windows¶
Attention
Cette partie de la documentation n’est probablement pas à jour faute de contributeur utilisant Windows. Il se peut que l’installation fonctionne correctement, partiellement ou pas du tout. Bref, en cas de problème n’hésitez pas à venir demander de l’aide sur le forum des Devs’ de Zeste de Savoir !
Node.js propose un installeur (.msi) pour Windows, disponible à cette adresse. Choisissez Windows Installer, avec l’architecture adéquate, et installez Node.js en ouvrant le fichier téléchargé.
Vérifiez de posséder la version 2.5.0 de npm (et non la version 1.4.X que peut installer l’installeur), pour connaitre votre version : npm -v
. Pour mettre à jour npm, vous avez trois possibilités, l’une d’elle est de faire npm install npm
dans le dossier C:\Program Files (x86)\nodejs
.
Veillez à respecter ces conditions, avant de faire npm install
(dans l’ordre d’installation) :
Windows 7 64-bit SDK, si vous êtes en 64bits.
- En cas de problème, avec l’installation du SDK, suivez ces instructions :
- Désinstallez : Microsoft Visual C++ 2010 redistributable packages (x86 et x64), dans le panneau de configuration.
- Relancez Windows 7 64-bit SDK, décochez “Visual C++ Compilers” et “Microsoft Visual C++ 2010”.
- Appliquez ce patch : SDK 7.1.
- Réinstallez (ils se sont peut-être déjà réinstallés tous seuls) Microsoft Visual C++ 2010 redistributable x64 et Microsoft Visual C++ 2010 redistributable x86.
Vous devez posséder Visual Studio Express 2013 pour Windows Desktop, la version 2012 ne suffit pas, forcez l’utilisation de vs 2013 comme ceci :
npm install --msvs_version=2013
, il est même conseillé de fairenpm config set msvs_version 2013
, pour les futurs installations/commandes.
Mac OS X¶
Node.js propose un installeur (.pkg) pour Mac OS X, disponible à cette adresse. Choisissez Mac OS X Installer, et installez Node.js en ouvrant le fichier téléchargé.
Linux¶
Ubuntu¶
L’installation peut se faire simplement via apt-get
:
sudo apt-get install nodejs
Mais il est possible d’avoir une version un peu plus récente avec :
sudo add-apt-repository ppa:chris-lea/node.js
sudo apt-get update
sudo apt-get install nodejs
Certaines dépendances utilisent node
au lieu de nodejs
, pour y remédier :
sudo ln -s /usr/bin/nodejs /usr/bin/node
Debian¶
Une version récente de Node.js se trouve dans les dépôts wheezy-backport, jessie et sid. Sur ces versions de Debian, l’installation peut se faire de cette manière :
sudo apt-get install nodejs
Fedora / CentOS / RHEL¶
Il vous faut tout simplement faire :
sudo curl -sL https://rpm.nodesource.com/setup | bash -
sudo yum install -y nodejs
FreeBSD / OpenBSD¶
Une installation via pkg
devrait suffire :
pkg install node
Les instructions pour installer Node.js sur les distributions CentOS, RHEL, FreeBSD et OpenBSD sont issues du lien juste en dessous et n’ont pas été testées.
Les instructions détaillées pour toutes les distributions se trouvent dans la documentation officielle (en anglais).
Pour vérifier que Node.js et npm sont installés (et que vous avez les bonnes versions) :
node -v
v0.10.26
npm -v
2.1.7
Vous devez avoir une version de Node.js > 0.10.x et de npm > 2.x.x. Si votre version de npm est 1.x.x, vous devez le mettre à jour (voir juste en dessous).
Mise à jour de Node.js et npm¶
Pour npm, il suffit de le mettre à jour avec cette commande :
sudo npm install -g npm
Pour ce qui est de Node.js, une mise à jour via le gestionnaire de paquets devrait fonctionner.
Installation des dépendances npm¶
L’installation de Gulp, ainsi que des différentes dépendances et bibliothèques, se fait via npm dans le répertoire du projet :
npm install
Utilisation des outils¶
Vous avez installé les outils ? Voilà comment on s’en sert dans notre projet !
Présentation de Gulp¶
Gulp est un outil permettant d’automatiser les tâches liées au front-end. Dans notre cas, il permet de :
- vérifier la syntaxe Javascript ;
- minimiser les fichiers Javascript et les rassembler en un fichier ;
- compiler les fichiers SCSS pour les transformer CSS ;
- compresser les images et créer un sprite.
Utilisation de Gulp¶
Gulp se lance avec npm run gulp -- [tâche]
où [tâche]
est la tâche à lancer.
Générer les fichiers avec build
¶
build
permet de :
- minimiser les fichiers Javascript et les rassembler en un 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/
).
Vérifier le code avec test
¶
test
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 npm run gulp -- test
(ou npm 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 arrêter cette
commande, il suffit de presser Ctrl+C
.
See also
Vous voulez en savoir plus ? Venez voir la documentation consacrée au front-end ! ;)
Quelques informations supplémentaires¶
La commande npm run
est un raccourci de la commande npm run-script
, donc les deux commandes sont identiques !
Si vous voulez utiliser directement la commande gulp -- [tâche]
au lieu de npm run gulp -- [tâche]
, vous pouvez
tout simplement créer un alias :
alias gulp="npm run gulp"