Exemple Browserify
Code source d'exemple pour illustrer la présentation Browserify ta life
Installation
Avoir nodejs sur son poste et lancer la commande suivante pour installer les dépendances :
npm install
Explication du contenu
Source
Les fichiers sources js sont dans le dossier assets/js/src :
assets/js/src/talker.js
assets/js/src/app.js
Le fichier assets/js/src/talker.js est un exemple de module.
Le fichier assets/js/src/app.js est un exemple d'utilisation d'un module local et d'un "module npm".
Tests
Les tests sont dans le dossier assets/js/tests :
assets/js/tests/talker.js
Les tests sont exécutés à l'aide de prova qui lance des tests basés sur tape et Browserify
Fichiers "compilés"
Les fichiers javascript "compilés" sont dans assets/js :
assets/js/app.js
assets/js/app.min.js
Fichier pour voir dans un navigateur
Le fichier html pour tester dans un browser est :
index.html
Utilisation
Tâches grunt
Le projet utilise grunt ainsi que les plugins :
- grunt-browserify pour compiler avec browserify et recompiler en "live"
- grunt-contrib-uglify pour minifier le js
Si vous lancez la tâche par défaut :
grunt
Cela va faire un browserify du fichier assets/js/src/app.js et mettre le résultat dans le fichier assets/js/app.js (avec les sourcemaps en inline pour pouvoir débugger)
La tâche va également détecter les changements dans le code et recompiler à la volée
Si vous lancez la tâche :
grunt release
Cela va faire :
- un browserify du fichier assets/js/src/app.js et mettre le résultat dans le fichier assets/js/app.min.js (sans sourcemap et sans "live reload")
- Minifier assets/js/app.min.js avec uglify
Lancement des tests
Pour lancer les tests dans node :
npm test
# ou
node assets/js/tests/talker.js
Pour lancer les tests dans un navigateur :
npm run-script test-browser
# ou
node assets/js/tests/talker.js -b