orgmode-to-gemini-blog/sources/cipherbliss_blog/lang_fr/20150514T195327__gnrateur-angular-jeej.org

:PROPERTIES:
:ID: 5af156bb-c76a-432b-adf8-067bec523105
:END:

#+title: gnrateur-angular-jeej
#+post_ID: 218
#+post_slug: gnrateur-angular-jeej
#+post_url: https://www.ciperbliss.com/2015/gnrateur-angular-jeej
#+post_title: générateur angular jeej
#+post_tags: 
#+post_type: post
#+post_mime_types: 
#+post_guid: undefined
#+post_status: publish
#+post_date_published: <2015-05-14T19:53:27>
#+post_date_modified: <2015-06-17T12:37:18>
#+post_index_page_roam_id: fa7f2a8c-2b94-4e42-bb4c-25c026ed7ff9
#+retrieved_from_db_at: <2024-11-18 16:25:08>


* générateur angular jeej
:PROPERTIES:
:CUSTOM_ID: générateur-angular-jeej
:END:

[[https://www.npmjs.com/static/images/npm-logo.svg]]trop
biennn, j'ai profité de ce jour férié pour publier mon premier package
NPM, un générateur [[http://yeoman.io][yeoman]] utilisant mes outils
favoris.Le tout avec du readme.md, des infos et
[[https://github.com/tykayn/generator-tk][un dépot sur
github]] (génétareur-tk).[[https://www.npmjs.com/package/generator-angular-jeej]]Voilà
ce que cela comprend:


#+begin_quote
Gulp, Angular, coffeescript, jquery, bootstrap, font awesome,
commitement to open source.browser sync, karma,
jasmine, jslint, uglify, coverall and more.



#+end_quote


* [[http://mgcrea.github.io/angular-7min/images/angularjs.png]]

[[https://humancoders-formations.s3.amazonaws.com/uploads/course/logo/48/formation-coffeescript.png]]

[[http://blog.xebia.fr/wp-content/uploads/2014/02/gulp-2x.png]]
:PROPERTIES:
:CUSTOM_ID: new_line_substitutenew_line_substitute
:END:

* comment utiliser le générateur angular jeej
:PROPERTIES:
:CUSTOM_ID: comment-utiliser-le-générateur-angular-jeej
:END:

[[http://blog.grayghostvisuals.com/xS6BUjV1g8vgRT/wp-content/uploads/2015/03/Yeoman.png]]


il vous faut avoir installé *yeoman* de chez NPM. dans un terminal,
exécutez cette commande:


#+begin_src brush :style box-sizing: border-box; margin-top: 0; margin-bottom: 0; padding: 0; border: 0; font-family: monospace, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25px; vertical-align: baseline; overflow-x: auto; color: rgba(0, 0, 0, 0.8); letter-spacing: -0.479999989271164px; background-color: rgb(255, 255, 255);
$ npm i -g yo
#+end_src

pour lancer le générateur, placez vous dans le dossier où vous voulez
avoir votre webapp, et utilisez *yo*.



#+begin_src brush :style box-sizing: border-box; margin-top: 0; margin-bottom: 0; padding: 0; border: 0; font-family: monospace, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25px; vertical-align: baseline; overflow-x: auto; color: rgba(0, 0, 0, 0.8); letter-spacing: -0.479999989271164px; background-color: rgb(255, 255, 255);
$ yo angular-jeej
#+end_src

Il vous sera demandé quelques infos a inclure dans votre webapp.



Chaque fois que vous modifierez un fichier source (dans le dossier
/src/), que ce soit un fichier .scss, .coffee, .js, ou html, ils seront
recompilés dans le dossier /dist/, et réinjectés dans le navigateur
grâce à browser sync.



#+begin_src brush :style box-sizing: border-box; margin-top: 0; margin-bottom: 0; padding: 0; border: 0; font-family: monospace, sans-serif; font-size: 16px; font-stretch: inherit; line-height: 25px; vertical-align: baseline; overflow-x: auto; color: rgba(0, 0, 0, 0.8); letter-spacing: -0.479999989271164px; background-color: rgb(255, 255, 255);
$ gulp
#+end_src

après install, vous pouvez voir que tout a
merveilleusement fonctionné, lancez gulp.rendez vous
sur http://localhost:3000 et voyez le mirâaaaacle
s'accomplir.dans votre console de commande vous
pourrez voir aussi que j'ai déjà mis en place quelques tests chargés de
vérifier qu'angular fonctionne bien avec le module et son controlleur
basiques.



notez que j'ai inclus des dépendances qui ne donnent encore aucune
action au niveau de gulp mais que je compte bien mettre en place, par
exemple coverall. Je n'ai pas encore clairement défini si je vire la
partie js dans le dossier src pour laisser la place aux fichiers coffee.

je vais sans doute proposer une option lors de l'exécution du
générateur. Enfin c'était un chouette défi!


Vous aussi pouvez [[http://yeoman.io/authoring/][créer votre générateur
yeoman perso]].



Pourquoi jeej comme nom de générateur? Parce que j'ai trop regardé de
youtube poop, et que mon générateur contient du SASS. Si ça ne vous dit
rien, considérez que vous avez un esprit sein dans un
corset.Allez donc le tester et n'hésitez pas à me
donner des conseils sur comment l'améliorer.