Les projets web « front-end » sont souvent des créations complexes, l’art de toute une vie. Certains les pensent spontanés et impromptus, mais rien n’est plus faux. Ils maturent parfois des mois avant de trouver l’équilibre qui les fera perdurer. Avant cela, ils ne sont que brouillons, échos diffus et réminiscences troubles.
Mais l’heure fatidique est arrivée, il faut donner vie à ce qui n’est pour le moment qu’une apathique maquette de design web. Qui n’a jamais déglutit (gulp !) devant l’ampleur des lignes de code CSS qui s’annoncent ? Se demandant par où commencer ? La réponse est pourtant simple, il faut partir du bon pied en utilisant un des incontournables outils de développement front : Gulp.
Cet automatiseur de tâches sera votre plus grand allié dans la quête qui vous incombe et vous fera gagner un temps précieux. Il est bon de noté l'existence de Grunt qui a le même objectif d'automatisation des tâches. Mais dans cette lutte fratricide, Gulp se distingue sur plusieurs aspects : sa configuration reste un brin plus simple et son utilisation plus rapide.
Dans votre développement local, il permettra notamment de rafraîchir le navigateur automatiquement à chaque fois que vous ferez une modification dans vos fichiers. Les fonctionnalités de Gulp sont légions, et tout est géré instantanément lorsque vous enregistrez vos modifications :
-
Optimise et minifie le CSS, JavaScript et les images.
-
Compile le Sass ou LESS.
-
Observe les modifications de fichiers et rafraîchis le navigateur.
-
Ajoute des préfixes CSS3.
Prérequis :
Avant de pouvoir bénéficier des supers-pouvoirs de Gulp, il faudra installer l’environnement JavaScript Node.js. Pour ceci, ouvrez un terminal et tapez les commandes suivantes :
sudo apt-get update
sudo apt-get install nodejs npm
Installation de Gulp :
npm install gulp -p
Une fois installé, il faudra placer les deux fichiers ci-dessous à la racine du projet pour que Gulp soit fonctionnel. L’exemple suivant a permis d’utiliser Gulp sur un projet de développement Magento 1.
-
package.json qui contient la liste des plugins.
{
"name": "Project name",
"author": "BlackbirdAgency",
"description": "Project name node modules dependencies for local development",
"version": "1.0.0",
"license": "(OSL-3.0 OR AFL-3.0)",
"repository": {
"type": "git",
"url": "https://github.com/magento/magento2.git"
},
"homepage": "http://magento.com/",
"devDependencies": {
"glob": "^5.0.14",
"gulp": "^3.9.1",
"gulp-concat": "^2.6.1",
"gulp-jshint": "^2.0.4",
"gulp-less": "^3.3.0",
"gulp-livereload": "^3.8.1",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^2.0.1",
"gulp-sourcemaps": "^2.0.1",
"gulp-util": "^3.0.8",
"imagemin-svgo": "^4.0.1",
"jshint": "^2.9.4",
"load-grunt-config": "^0.16.0",
"morgan": "^1.5.0",
"node-minify": "^1.0.1",
"path": "^0.11.14",
"serve-static": "^1.7.1",
"strip-json-comments": "^1.0.2",
"underscore": "^1.7.0"
},
"engines": {
"node": ">=0.10.0"
},
"dependencies": {
"less": "^2.7.2"
}
}
Pour installer les plugins listés dans le fichier ci-dessus, rendez-vous dans le dossier du projet et tapez la commande suivante dans le terminal :
npm install
L’ensemble des plugins seront installés dans un dossier node_modules généré automatiquement à la racine du projet.
- gulpfile.js qui contient la liste des tâches à effectuer.
var gulp = require('gulp'),
jshint = require('gulp-jshint'),
less = require('gulp-less'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
gutil = require('gulp-util'),
livereload = require('gulp-livereload'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('less', function() {
return gulp.src(['skin/frontend/theme/default/css/styles.less'])
.pipe(less())
.on('error', swallowError)
.pipe( sourcemaps.write() )
.pipe( livereload() )
.pipe(gulp.dest('skin/frontend/theme/default/css'));
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('skin/frontend/theme/default/css/*.less', ['less']);
});
gulp.task('default', ['less', 'watch']);
function swallowError (error) {
// If you want details of the error in the console
console.log(error.toString());
this.emit('end');
}
Il faudra adapter les chemins source gulp.src(...) et destination gulp.dest(...) des fichiers par rapport à votre projet. C’est le plugin gulp-less qui permet de compiler LESS vers CSS.
Ajoutez à votre .bashrc l’alias suivant :
alias gulp='./node_modules/gulp/bin/gulp.js'
Installez et activez le LiveReload sur votre navigateur Google Chrome, cela permettra de voir vos modifications instantanément.
Une fois fait, il suffira de lancer dans votre terminal la commande :
gulp
Vos fichiers LESS seront automatiquement compilés en CSS et vos modifications rafraîchies dans le navigateur.
-
styles.less
@import 'global.less';
@import 'navigation.less';
-
global.less
// Colors variable
@base: #1a1a2a;
@blue: #2e3285';
-
navigation.less
@import global.less';
.page-wrapper {
.nav-sections {
background-color: @blue;
.navigation {
ul.ui-menu {
text-align: right;
li.level0 {
a {
padding: 10px 20px;
{
span
{
color: @base;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
}
}
}
}
}
}
}
-
styles.css (généré automatiquement par Gulp)
.page-wrapper .nav-sections {
background-color: #2e3285;
}
.page-wrapper .nav-sections .navigation ul.ui-menu {
text-align: right;
}
.page-wrapper .nav-sections .navigation ul.ui-menu li.level0 a {
padding: 10px 20px;
}
.page-wrapper .nav-sections .navigation ul.ui-menu li.level0 a span {
color: #1a1a2a;
text-transform: uppercase;
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
}
Ainsi, il suffit d’un rien, un zeste de gulp, un soupçon de bonne méthode pour que la perspective d’un développement « front-end » long et fastidieux s’écroule sur elle-même et renaisse pleine d’optimisme, de joie et de bonne humeur ! Et quand se lève le voile à la fin du projet, de la maquette amorphe et ses tourbillons d’idées jetées en l’air ne reste qu’une cathédrale élancée, dont les belles courbes CSS rappellent à quel point Gulp est précieux.
