général

Dans une page web on peut inclure du css

Et des scripts

gestion du path

il faut absolument mettre un / initial sinon des qu'on change la profondeur de url l'import ne marche plus.

exemple : je suis sur /home et j'ai déclaré ça

le browser va chercher le css ici : /css/style.css
mais si je suis sur /x/index.html
le browser va cherche le css ici : /x/css/style.css
donc autant mettre directement le path absolu et ne jamais planter.

gestion du cache

il faut mettre un hash du fichier dans l'url, ou un numéro de version. Sinon quand on modifie le fichier le browser garde parfois l'ancienne version en cache et ça peut faire planter le reste des scripts.

Exemple : /js/script.js?version={{config.version}}
la partie "?version=xxx" n'a aucun effet à part forcer le cache à télécharger la nouvelle version du fichier quand sa valeur change.

mise à jour des libs

Soit on met des urls en dur issues de cdn :

c'est deja très bien car la version est dans l'url.
mais c'est pas pratique pour mettre à jour et incompatible avec l'assemblage les scripts.

Soit on installe les libs depuis github ou un autre git. Mais pareil c'est pas pratique à mettre en place, ni à jour.

Soit on les installe via npm. ce qui permet de faire npm update pour les mettre à jour.

installer via npm

Quand la lib n'explique pas commnt faire dans le readme, il faut recuperer le nom qui se trouve dans le package.json de la lib. puis faire npm install xxx

assemblage : gulp

Afin d'avoir un seul js et un seul css, ce qui améliore énormément les perfs, on génère un unique fichier all.js et all.css qui est inclus dans toutes les pages du site.

Pour ça on utilise la commande

gulp

qui va exécuter le fichier gulpfile.js à la racine du projet, ce qui va régénérer les fichiers.

gulpfile.js

• js: On peut spécifier les js à assembler. Il n'y a pas de piège. Il suffit de mettre le path trouvé dans node_modules dans le gulpfile.js
  Si il y a le choix il faut prendre un fichier min ou umd.

• css:

1. soit c'est un css tout seul (sans images) dans ce cas on peut le mettre directement dans gulpfile.js.
2. soit c'est un css avec imges/fonts/autre, dans ce cas il faut ajouter un copy de node_modules/xxx vers web/vendor/xxx puis on assemble le fichier css depuis web/vendor/xxx

public web folder

/web/bundles

Dans ce dossier on trouve les libs qu'on a pas pu trouver sur npm et le script principal main.js

/web/vendor

Dans ce dossier on trouve les libs qu'on a trouvé sur npm et qui nécessitent d'être sorties de node_modules pour fonctionner (car elles contiennent des images qui doivent se retrouver dans le dossier dist final par exemple)

/web/dist

Dans ce dossier on trouve les fichiers assemblés par gulp. Il est suffisant de ne déployer que ce dossier en prod.

/web/dist/all.css
/web/dist/all.js
et des images, fonts, ...

conclusion

Quand on veut installer une nouvelle lib de front.

• npm install xxx
• adapte le gulpfile.js
• On fait "gulp" pour régénérer all.css et all.js
• et on a plus qu'à tester dans le navigateur en faisant control+F5.
• lors du déploiement en prod, le numéro de version change donc les utilisateurs auront pas besoin de faire control+F5.