Task-runner

Plugins Gulp pour développeur Front-end

gulp

Voici des plugins Gulp très utiles pour améliorer votre productivité en tant que développeur Front-end :

gulp-sass

gulp-sass permet de compiler votre code SASS en CSS

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('css', function () {
  return gulp.src(source + '/sass/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest(prod + '/css'));
});

gulp-autoprefixer

Super plugin qui vous permet de ne plus vous soucier des préfixes : gulp-autoprefixer préfixe automatiquement vos CSS de manière intelligente. Possibilité de le paramétrer avec le choix des navigateurs et versions à supporter.

Ex : Reprise de l’exemple précédent en ajoutant autoprefixer :

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('css', function () {
  return gulp.src(source + '/sass/**/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(gulp.dest(prod + '/css'));
});

gulp-uncss

gulp-uncss va supprimer tout le CSS non utilisé. Très utile si vous utilisez un framework (Bootstrap par exemple) ou un CMS comme WordPress qui génèrent des CSS à rallonge.

gulp-csso ou gulp-cssnano

gulp-csso et gulp-cssnano sont deux plugin (au choix) utilisés pour minifier vos fichiers CSS.

gulp-uglify

gulp-uglify est utilisé pour minifier les fichiers javascript.

Useref

gulp-useref va lire tous les fichiers CSS et JS appelés dans votre code HTML puis va les concaténer et inclure un unique fichier. Pour minifier les fichiers il faut utiliser (gulp-csso et gulp-uglify).

Un atout de taille de gulp-useref est qu’il respecte l’ordre d’appel des fichiers dans le HTML, très utile pour les fichiers javascript en particulier.

Ex :
Cet exemple a été mis à jour le 16/02/2016 pour prendre en compte la version 3 de gulp-useref

gulpfile.js :

var gulp = require('gulp');
var csso = require('gulp-csso');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
gulp.task ('reduceFile', function() {

  return gulp.src(source + '/index.html')
    .pipe(useref()) // Concatène avec gulp-useref
    .pipe(gulpIf('*.js', uglify())) // Minifie le JS
    .pipe(gulpIf('*.css', csso())) // Minifie le CSS
    .pipe(gulp.dest(prod));
});

Dans votre index.html :

...
    <!-- build:js scripts/minified.js -->
    <script type="text/javascript" src="scripts/un.js"></script> 
    <script type="text/javascript" src="scripts/deux.js"></script> 
    <script type="text/javascript" src="scripts/trois.js"></script> 
    <!-- endbuild -->
...

gulp-useref va le transformer en :

<script src="scripts/minified.js"></script>

gulp-rev et gulp-rev-replace

gulp-rev va gérer le versionning d’un fichier en donnant un nom unique. Cela permet de mettre en cache les fichiers sans risquer des problèmes liés au cache (fichier qui change mais pas son nom). gulp-rev-replace va remplacer le nom du fichier par celui de gulp-rev dans votre code HTML.

Ex : le fichier style.css va être renommé en style2546987485.css par exemple.

browser-sync

Très pratique en phase de développement, BrowserSync actualise automatiquement vos navigateurs lorsque vous faites des  modifications dans vos fichiers (HTML ,  CSS, JS, etc.)

gulp-imagemin

gulp-imagemin s’utilise pour compresser et optimiser vos images (png, gif, jpeg, svg).

gulpfile.js :

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('img', function() {
  return gulp.src(source+"/**/*.+(jpg|png|gif)")
   .pipe(imagemin())
   .pipe(gulp.dest(prod))
});

Pour éviter de recompresser les images à chaque fois et de ne se charger que des nouvelles ou de celles qui ont changé, on peut utiliser le plugin gulp-cache.

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');

gulp.task('img', function() {
 return gulp.src(source+"/**/*.+(jpg|png|gif)")
 .pipe(cache(imagemin()))
 .pipe(gulp.dest(prod))
});

critical

critical est un plugin qui va insérer les CSS critiques (c’est-à-dire ceux qui participent à l’affichage au dessus de la ligne de flottaison) directement dans le HTML (entre des balises <style>).

C’est le conseil que l’on retrouve souvent sur Google PageSpeed Insight.

Cela permet d’accélérer le processus de chargement de votre site.

Pour la mise en pratique, vous pouvez consulter mon article sur le workflow front-end que j’utilise pour mon site perso.

 

Une réponse à “Plugins Gulp pour développeur Front-end

  1. Merci pour l’article. Pour les Dev Front, il y a aussi Browsersync, pour synchroniser et actualiser automatiquement vos pages web lors de la modification des fichiers sources. Ça fait gagner pas mal de temps lors des différents devs.
    D’ailleurs, un mec de ma boîte a fait un article sur le sujet, il explique notamment comment l’utiliser en ligne de commande et comment utiliser l’API JavaScript dans des scénarios un peu plus complexe :), si jamais :
    https://www.softfluent.fr/blog/expertise/2017/03/08/Augmentez-votre-productivite-avec-Browsersync

Laisser un commentaire

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