Mettre en place / installer Gulp

Régis Enguehard

il y a 4 ans

Gulp va nous permettre de compiler des fichiers sass, less, stylus… mais également de minifier les fichiers css ; de créer les fichiers .map associé. Également d’autres choses : compiler un ensemble de fichiers JavaScript en un seul, de le minifier de créer le .map ; mais encore de compresser nos images png, jpg, svg, gif en leur version réduite.

Le site officiel de Gulp : https://gulpjs.com/ et les plugins : https://gulpjs.com/plugins/

Préalable

Avant de passer à Gulp, il nous faut installer Node sur notre machine. Il va nous permettre de surveiller dossiers et fichier et exécuter des tâches.

L’installation se fait simplement via l’installer https://nodejs.org/en/

Gulp

Pour lancer gulp, il faut l’installer de manière globale. Une seule ligne de commande suffit :

npm install -global gulp-cli

Modules npm

Les modules vont s’installer par projet. Les plus connus et les plus usités sont :

gulp-rename : renommer des fichiers, notamment ajouter le .min dans notre nom de fichier
gulp-sass : préprocesseur SASS
gulp-uglify : minify les fichiers JS
gulp-concat : concaténe les fichiers
gulp-sourcemaps : pour les créer les fichiers .map
gulp-csscomb : formate correctement les fichiers CSS
gulp-csso : minify les fichiers CSS
gulp-imagemin : optimise les fichiers PNG, JPG, SVG et GIF
gulp-cssbeautify : fichier css réordonner

Pour installer ces modules uniquement pour le développement :

npm install --save-dev gulp
npm install --save-dev gulp-rename
npm install --save-dev gulp-sass
npm install --save-dev gulp-uglify
npm install --save-dev gulp-concat
npm install --save-dev gulp-sourcemaps
npm install --save-dev gulp-csscomb
npm install --save-dev gulp-csso
npm install --save-dev gulp-imagemin
npm install --save-dev gulp-cssbeautify

.gitignore

Si l’on doit utiliser git dans un projet, il vaut mieux ajouter un fichier .gitignore à la racine du projet, et ignorer le dossier nodes_modules.

gulpfile.js

Pour fonctionner, Gulp a besoin d’un fichier gulpfile.js dans le projet.

const { src, dest, watch, task } = require('gulp');
const sass = require('gulp-sass');
const csscomb = require('gulp-csscomb');
const cssbeautify = require('gulp-cssbeautify');
const csso = require('gulp-csso');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');  // minify js
const imagemin = require('gulp-imagemin');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');

// Variables de chemins
let source = './src'; // dossier de travail
let destination = './dist'; // dossier à livrer



function build(cb) {
    css();
    js();
    img()
    cb();
}


function css() {
    return src(source + '/assets/css/style.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(csscomb())
        .pipe(cssbeautify({ indent: '  ' }))
        .pipe(csso())
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(sourcemaps.init({ loadMaps: false }))
        .pipe(sourcemaps.write('../maps'))
        .pipe(dest(destination + '/assets/css/'));
}
function js() {
    return src(source + '/assets/js/*.js')
        .pipe(uglify())
        .pipe(sourcemaps.init({ loadMaps: false }))
        .pipe(concat('app.min.js'))
        .pipe(sourcemaps.write('../maps'))
        .pipe(dest(destination + '/assets/js/'));
}
function img() {
    return src(source + '/assets/img/*.{png,jpg,jpeg,gif,svg}')
        .pipe(imagemin())
        .pipe(dest(destination + '/assets/img/'));
}
exports.build = build;
exports.default = build;

exports.css = css;
exports.default = css;

exports.js = js;
exports.default = js;

exports.img = img;
exports.default = img;

//exports.watch.description = "Recompile à la volée tous les fichiers";
exports.build.description = exports.default.description = "Compile tous les fichiers (CSS, JS, images)";
exports.css.description = "Compile en css les fichiers scss";
exports.js.description = "Compile les fichiers JavaScript";
exports.img.description = "Réduit le poids des images";


task('watch', function () {
    watch(source + '/assets/css/style.scss', {
        events: 'all', ignoreInitial: false
    }, function (cb) {
        css();
        cb();
    });
    watch(source + '/assets/js/*.js', function (cb) {
        js();
        cb();
    });
    watch(source + '/assets/img/*', function (cb) {
        img();
        cb();
    });
});

Celui-ci, va permettre de lancer différentes tâches : compiler les CSS, compiler les fichiers JS, réduire le poids des images ou tout faire à la fois.

Au niveau de la structure des fichiers, ceux-ci seront dans 2 dossiers : 1 pour les sources, 1 autre pour les fichiers compilés. Chacun des dossiers contiendra 1 dossiers css, js et img.