Cours IMAC 2 12/01/2017

Pré-requis

• node/npm
  • Utilisé pour installer les packages.
• gulp
  • Utilisé pour créer des taches d'automatisation, principallement pour build vos fichiers js et scss.
• browserify
  • Permet de require() des modules npm et vos propres fichiers js.

Fichiers

• package.json
  • Le fichier dans lequel les packages npm sont sauvegardés.
• Gulpfile.js
  • le fichier pour les tasks gulp.

Dossiers

• node_modules
  • Généré par npm, c'est le dossier dans lequel les packages npm sont installés, à ajouter au .gitignore.
• gulp
  • Si vous voulez séparer les tasks gulp en fichiers, metez les dedans (ce n'est pas obligatoire, le nom est pas important).
• src
  • Metez vos fichiers source js et css dedans (le nom du dossier n'est pas important, il faut juste que ça corresponde avec le code dans les tasks Gulp).

Commandes

$ # Ajouter un package npm au projet
$ npm install --save-dev nom_du_package
$ # ou
$ npm install --save nom_du_package

$ # Installer les packages présents dans packages.json
$ npm install

$ # Lancer les tasks Gulp
$ gulp

Quelques packages npm utiles

• babel
• Permet de générer des fichiers js compatibles avec tous les navigateurs, tout en codand en ES6.
• watchify
  • Permet de watch les fichiers js et scss pour les re-compiler automatiquement.
• domready
  • Permet de lancer du code une fois le DOM prèt.
• isomorphic-fetch et es6-promise
  • Permet d'utiliser fetch ainsi que les promises tout en étant compatible avec tous les navigateurs. Plus d'infos ici.
• preload.js
  • Permet de gérer le chargement d'assets.
• gsap
  • Permet de faire des animations et timelines simplement.

Pour plus de packages, regardez le packages.json, ainsi que les différents fichiers Gulp. Faites attention aussi au fait que de nombreux packages possèdent des dépendances qu'il faut aussi installer si vous souhaiter les utiliser. Référez vous aux docs des packages.