Compiler Less, Scss avec Gulp/NodeJS

Dans cet article je vais détailler l’installation de Gulp et commenter un exemple de script pour compiler des fichiers CSS au format less et les minifier (supprimer tout le superflu) et également minifier des fichiers JS.

Gulp est un programme (module) qui utilise NodeJS. Comme prérequis il est donc nécessaire que NodeJS soit installé sur votre ordinateur.

Sur le site Nodejs, vous trouverez tout le nécessaire quelque soit votre système.

Dossiers de travail

Voici l’arbo que j’utilise, libre à vous de l’adapter.

src/js ‘ fichiers js source
srv/css ‘ fichiers css, less source
static/css ‘fichier css compilés et minifiés
static/js ‘fichier js minifiés

Installation de gulp

Gulp doit être installé en global avec : npm i -g gulp

Il faut ensuite installer les modules complémentaires en local (dans node_modules de votre projet)

npm install --save-dev gulp-minify-css gulp-uglify gulp-rename gulp-jshint gulp-less gulp-recess

A partir de la tout le nécessaire est installé pour compilé. Il faut maintenant créer un fichier gulpfile.js pour indiquer à Gulp ce qu’il doit faire, ou sont les fichiers etc…

// gulp et path
var gulp = require('gulp');
var path = require('path');

// modules gulp
var jshint = require('gulp-jshint');
var less = require('gulp-less');
var recess = require('gulp-recess');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// ajout d'une task (tache gulp)
// XX = path absolu du dossier projet
 
gulp.task('JS_files',function() {
  gulp.src('XX/src/js')
  .pipe(uglify())
  .pipe(gulp.dest('XX/static/js'));
});

// configuration d'un watcher pour surveiller les fichiers
// le watcher exécute une task chaque fois qu'un fichier est modifié

gulp.task('watch',function() {
 gulp.watch('XX/src/js',gulp.series['JS_files']);
});

Gulp ne se limite pas à ce genre de traitements. Il est capable de pleins d’autres choses sur des fichiers textes et même sur des images. Comme Gulp utilise un système modulaire il n’y a quasiment aucune limite . Pour plus d’informations le site officiel c’est http://gulpjs.com/

Liste de tous les modules Gulp sur le site NPM : https://www.npmjs.com/search?q=gulp