Cipher Bliss

mardi 29 mars 2016

gulpifie ton prestashop

<p>Vous êtes dev front end et aimeriez avoir du livereload quand vous bossez sur un thème prestashop? Gulpifiez votre prestashop! &nbsp;(ou en fait non, fuyez tant qu'il en est encore temps)</p> <p>dans votre terminal favori, dans la racine de votre projet prestashop faites ceci: Installons localement gulp et browser-sync avec node package manager:</p> <p>&nbsp;npm i --save-dev gulp browser-sync</p> <p>ça mouline quelques temps, ensuite créez un fichier Gulpfile.js toujours à la racine de votre projet et remplissez le de ceci:</p> <pre><code>/**

gulpify script of tykayn
https://github.com/tykayn/blog.artlemoine.com
http://artlemoine.com
to run this you need bash to install dependencies:
npm i -D gulp browser-sync --save-dev;
gulp
**/

var serverName = 'latrotteuse.lan'; // you NEED to have a vhost of this name setup var gulp = require('gulp'); var browserSync = require('browser-sync');

// Static server. gulp.task('browser-sync', function () {

   // init server
   browserSync.init({
       proxy: serverName + "/"
   });
   // the server will automatically reload on change
   var filesToWatch = ["themes/**/*.tpl",
       "themes/**/*.js",
       "themes/**/*.css",
       "themes/**/*.html",
       "src/**/*.php"];
   gulp.watch(filesToWatch)
     .on('change', browserSync.reload);

});

gulp.task('default', 'browser-sync'); </code></pre> il vous faudra définir un virtual host pour que ça fonctionne. on a donc un fichier minimal, avec une tâche par défaut qui lance un serveur web local sur le port 3000 et qui recharge le browser à la modification d'un fichier dans le répertoire de thèmes. wouala, enjoyez!&lt;/span&gt; &lt;/pre&gt;</p>

jeudi 14 mai 2015

générateur angular jeej

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

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

comment utiliser le générateur angular jeej

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


$ npm i -g yo

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

$ yo angular-jeej

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.

$ gulp

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 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.