Gulp et 925…

La petite histoire

Suite au Meetup du groupe FrontEnd sur Gulp.js j’ai mis un peu de temps à digérer l’information et surtout à me motiver à apprendre quelque chose qui me paraissait bien compliqué.

Puis j’ai entendu parler de “Post_CSS” qui s’annonce comme le futur des “CSS”. Mais dans les pré-requis de Post_CSS il faut utiliser un “task runner” comme gulp, brocoli, grunt ou autres, donc pas le choix… gulp ou rien et quelle ne fut pas ma surprise!

Gulp c’est pas si compliqué… c’est presque simple…

Ici, je ne vais pas vous faire une introduction de gulp mais sachez que plein de supers articles le font très bien:

Je vais simplement vous expliquer mon workflow actuel qui, je l’espère, va évoluer.

Le workflow?

Quelles ont les choses dont j’ai besoin actuellement:

1- Compiler mon Sass et mon js, vérifier s’il y a des erreurs.. et recevoir une notification quand cela est fait.
dans le: gulp default… le gulp watch, notify, scss, plumber.. ( plumber pour valider le scss sans stopper le watch. )

2- Optimiser mes codes css et js et compresser les images occasionnellement.
dans un: gulp optimise uglify, rename, imgemin

3- (encore en phase de test) – Déployer sur le serveur distant via FTP.

Installation dev de base

Pour mon installation de base je n’ai pas besoin de live reload car actuellement je travaille sur un site sur un serveur afin que moi et Marion puissions travailler ensemble.
Let’s go pour du code dans le terminal dans le dossier de travail:

création du fichier .jason du projet

$ npm init

on se laisse guider par les questions : nom, description…
puis:

install du gulp local: ( le “sudo” dépend de vos permissions d’utilisateur)

$ sudo npm install —save-dev gulp

ce qui crée un dossier -> node_modules

Initialisation des modules de développement ( cf la liste des plugins que j’utilise) :
$ sudo npm install —save-dev gulp-uglify

ainsi de suite pour avoir toutes les dépendances qui vont s’enregistrer dans le dossier node_module et se lister dans le fichier “package.json” dont voici un extrait:

package.json

{
"name": "MONPROJET",
"version": "1.0.0",
"description": "website with gulp simple workflow",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"gulp": " ^3.9.0",
"gulp-imagemin": "^2.3.0",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.0.4",
"gulp-uglify": "^1.4.1",
"gulp-watch": "^4.3.5"

},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

on peut enfin créer le fichier gulpfile.js, notre fichier pilote.

GULPFILE.JS

le fichier fonctionnel … base 1.

// Load plugins 
var gulp = require('gulp'), // gulp la base 
uglify = require('gulp-uglify'),   // compresse les js et les css.
sass = require('gulp-sass'),       // compile le Sass.
watch = require('gulp-watch'),     // check si un fichier à été modifié en live.
plumber = require('gulp-plumber'), // check les erreurs de syntaxe sans stopper le watch.
notify = require ('gulp-notify'),   // affiche une notification OSX.
rename = require ('gulp-rename'),   // renomme un fichier si besoin (utile pour .min.js).
imagemin = require('gulp-imagemin') // compresse les images.



// Styles compilation des styles
gulp.task('styles', function() {
gulp.src('./library/scss/**/*.scss') // check les dossier s'il y a un fichier .sass.
.pipe(plumber()) // vérifie la syntaxe sans stopper le watch.
.pipe(sass()) // compile le SASS.
.pipe(gulp.dest('./library/css'))  // enregistre les fichiers au bon endroit.
.pipe(notify("Youuuu c'est compilé! :-)) "));  // une jolie notification.
});


// Tâche "js" = uglify 
gulp.task('js', function() {
gulp.src('./library/js/*.js') // check les dossiers s'il y a un fichier .js
.pipe(uglify()) // compresse le fichier.
.pipe(rename( 'script.min.js')) // renomme le fichier.
.pipe(gulp.dest('./library/js/min')) //enregistre le fichier au bon endroit. 
.pipe(notify("Minifier le JS ! :-)) "));;
});

// Images
gulp.task('images', function() {
return gulp.src('./library/images/**/*')
.pipe(imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }))
.pipe(gulp.dest('./library/images'))
.pipe(notify({ message: 'Images task complete' }));
});

La version encore plus automatique avec GULP LOAD-PLUGINS!
Gulp Load Plugin permet de, simplement, à la création du projet de développement, aller regarder les devDependencies et de les installer automatiquement sans avoir à passer par -> sudo npm install —save-dev gulp-uglify.

Cela nécessite quelques aménagements dans le fichier gulpfile.js (mais pas grand chose)

La création des variables est résumée à gulp et load-plugins.

// Load plugins 
var gulp = require('gulp'),
plugins = require('gulp-load-plugins')();

Puis il faut appeler les plugins à charger dans les fonctions comme dans l’exemple suivant:

.pipe(plumber())  // avant 
.pipe(plugins.plumber())    // après -> on a simplement ajouter plugins. avant d'appeler plumber.

Même chose pour la suite:

// Styles
gulp.task('styles', function() {
gulp.src('./library/scss/**/*.scss') 
.pipe(plumber()) 
.pipe(sass())
.pipe(gulp.dest('./library/css'))
.pipe(notify("Youuuu c'est compiler! :-)) "));
});

devient:

// Styles
gulp.task('styles', function() {
gulp.src('./library/scss/**/*.scss') 
.pipe(plugins.plumber()) 
.pipe(plugins.sass())
.pipe(gulp.dest('./library/css'))
.pipe(plugins.notify("Youuuu c'est compiler! :-)) "));
});

La nouvelle façon de lancer le projet est donc:

npm install

ce qui va charger automatiquement tout les plugins listés dans notre fichier package.jason. dans le dossier node_module.

Voici mes 2 fichiers fonctionnels:

package.json

    {
  "name": "925Interactive",
  "version": "1.0.0",
  "description": "website with gulp 1sr try",
  "main": "gulpfile.js",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-load-plugins": "^0.10.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.1",
    "gulp-watch": "^4.3.5"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

et

gulpfile.js

        // Load plugins  
    var gulp = require('gulp'),
        plugins = require('gulp-load-plugins')();


    // Styles
    gulp.task('styles', function() {
        gulp.src('./library/scss/**/*.scss')  
            .pipe(plugins.plumber())                 
            .pipe(plugins.sass())
            .pipe(gulp.dest('./library/css'))
            .pipe(plugins.notify("Youuuu c'est compiler! :-)) "));
    });


    // Tâche "js" = uglify + concat
    gulp.task('js', function() {
       gulp.src('./library/js/*.js')
        .pipe(plugins.uglify())
        .pipe(plugins.rename( 'script.min.js'))
        .pipe(gulp.dest('./library/js/min'))
        .pipe(plugins.notify("Minifier le JS ! :-)) "));;
    });

    // Images
    gulp.task('images', function() {
      return gulp.src('./library/images/**/*')
        .pipe(plugins.imagemin({ optimizationLevel: 7, progressive: true, interlaced: true }))
        .pipe(gulp.dest('./library/images'))
        .pipe(plugins.notify({ message: 'Images task complete' }));
    });


// watch .... 
gulp.task ('watch', function(){

    gulp.watch('./library/scss/**/*.scss',['styles']);
    gulp.watch('./library/js/*.js',['js']);


});

// Default task
gulp.task('default', ['styles','js', 'watch']);
gulp.task('optimise',['styles','js','images']);

2 Commentaires

Jérôme Clerc

Hello,

Merci pour cet article. Gulp est vraiment un super outil, je m’y suis mis il y a quelques temps et ça change la vie 🙂

Pour le déploiement sur le serveur, jette un coup d’oeil à « Dploy ». Sa demande un peu de discipline avec un dépôt GIT, mais c’est très simple d’utilisation et ça facilite grandement la vie.

Bonne journée et A+

Reply
marion vandeW

Bonjour Jérôme!

Merci beaucoup pour ton commentaire.
En effet, Gulp nous a vraiment simplifier la vie et nous a permis de ne plus travailler avec Codekit qui allait de moins en moins bien…
Nous sommes toujours en phase d’apprentissage, nous avons ajouté Plumber à notre liste 🙂 et nous allons bientôt nous tourner vers Dploy qui nous semble très intéressant!

Bonne journée à toi!

Reply

Laisser un commentaire

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