1 minute

En une minute : Gulp remplaçant de Grunt

flattr this!

J'arrive un peu après le gros du buzz mais pour ceux qui ne connaissent pas encore, je vous invite à essayer Gulp (https://github.com/wearefractal/gulp). C'est un concurrent de Grunt.

Au lieu de réécrire/remplacer des fichiers à chaque fin de tâche, il préfère les mettre dans un flux. Moins de IO, plus de performances. Et la syntaxe est bien plus confortable puisque vous ne configurez pas les tâches pour les exécuter, vous les appelez directement.

Exemple :

/*
  This is an EXAMPLE gulpfile.js
  You'll want to change it to match your project.
  Find plugins at https://npmjs.org/browse/keyword/gulpplugin
*/
var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  // Minify and copy all JavaScript (except vendor scripts)
  gulp.src(['client/js/**/*.js', '!client/js/vendor/**'])
    .pipe(uglify())
    .pipe(gulp.dest('build/js'));

  // Copy vendor files
  gulp.src('client/js/vendor/**')
    .pipe(gulp.dest('build/js/vendor'));
});

// Copy all static assets
gulp.task('copy', function() {
  gulp.src('client/img/**')
    .pipe(gulp.dest('build/img'));

  gulp.src('client/css/**')
    .pipe(gulp.dest('build/css'));

  gulp.src('client/*.html')
    .pipe(gulp.dest('build'));
});

// The default task (called when you run `gulp`)
gulp.task('default', function() {
  gulp.run('scripts', 'copy');

  // Watch files and run tasks if they change
  gulp.watch('client/js/**', function(event) {
    gulp.run('scripts');
  });

  gulp.watch([
    'client/img/**',
    'client/css/**',
    'client/*.html'
  ], function(event) {
    gulp.run('copy');
  });
});

flattr this!

A propos de Mathieu

Ingénieur développeur web dans la vente par correspondance B2B, adepte de nouvelles technologies et d'innovation. Vous pouvez aussi me retrouver sur Twitter @mathrobin
Cette entrée a été publiée dans En une minute, avec comme mot(s)-clef(s) , , . Vous pouvez la mettre en favoris avec ce permalien.

11 réponses à En une minute : Gulp remplaçant de Grunt

  1. syndrael dit :

    A tester en effet, mais j’avoue être habitué à GruntJS. Tous ces outils qui arrivent, on en oublie presque de coder tant que rien n’est automatisé.. et avec ces nouveautés il est difficile d’avoir un cycle de prod qui soit stable pendant 2 mois au moins.. ;-)

    • Mathieu dit :

      Moi j’aime bien ce côté « sans coder » justement. Je mets en place une bonne archi bien grosse bien épaisse et après je n’ai plus qu’à me concentrer sur le code réellement intéressant. Ça fait du bien^^
      Après je suis d’accord que tout va tellement vite qu’il est compliqué de se lancer dans une nouvelle techno tous les 3 mois. Ceci dit, la pause entre les sprints sert aussi à ça, en général.

  2. neemzy dit :

    Le but, c’est de trouver ce qui marche pour toi, la hype importe peu. Concernant Gulp, je suis très très fan mais l’outil est encore trop jeune pour un usage quotidien sage :)

  3. VIncent dit :

    Je suis assez d’accord avec Syndrael d’autant plus que Grunt est maintenant bien assis sur pas mal de solutions/framework.
    Ça n’enlève rien à la qualité de Gulp qui est, je trouve, plus « naturel » à lire qu’un gros fichier de conf Grunt.

  4. ghoullier dit :

    C’est assez prometteur en effet.
    Par contre je suis assez déçu par le plugin gulp-sass …
    Si on souhaite découper son code sass en plusieurs fichiers partials, il faut indiquer dans la conf gulp ou ils sont situés! Nul!
    Espérons que dans les versions à venir ça sera plus le cas.

  5. Stéphane dit :

    Pour le grunt il est préférable pour ne pas dire recommandé de découper le Gruntfile en morceau. Pas si compliqué et très efficace pour le maintenir.

    ++

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Articles liés