Non classé

Utiliser Gulp pour gérer du LESS et du JavaScript dans vos projets

Il est très probable que votre projet doive contenir du JS et du CSS, à l’heure où nous disposons d’une quantité satisfaisante de ressources sur le web pour des librairies JS, Bootstrap…
La question à laquelle nous allons répondre aujourd’hui est : comment utiliser Gulp pour gérer nos dépendances front.

Comme vous le constaterez dans le dernier point, nous ne parlerons pas ici de la raison pour laquelle utiliser Gulp plutôt que les assets de Symfony. Je vous invite à avoir cette réflexion dans les commentaires de cet article, nous permettant ainsi de rédiger un autre article sur ce point.

Cet article est extrait de notre gestionnaire de documentation interne, et se base sur la façon de faire mise en place sur certains de nos derniers projets.
Rentrons dans le vif du sujet.

1. Installer NodeJS et les paquets Node

Nous allons avoir besoin de NodeJS pour créer un fichier package.json à la racine de notre projet qui contiendra les paquets Node à installer pour faire tourner Gulp.

{
  "name": "mon-super-projet",
  "description": "Mon Super Projet",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": "ssh://git@gitlab.acseo.co:10022/nicolas.kern/mon-super-projet.git"
  },
  "dependencies": {
    "gulp": "^3.9.1",
    "bower": "^1.7.9",
    "gulp-less": "^3.1.0",
    "gulp-coffee": "^2.3.2",
    "gulp-concat": "^2.6.0",
    "gulp-minify-css": "^1.2.4"
  }
}

A partir de là, vous pouvez ajouter les paquets dont vous avez besoin.

Personnellement, j’aime bien avoir gulp et bower installés globalement sur ma machine, avec la commande : sudo npm install gulp -g && sudo npm install bower -g

Pour installer les autres paquets, utiliser la commande : npm install monpaquet –save-dev

Le paramètre save-dev permettra d’ajouter la référence du package dans package.json et permettra ainsi à un autre développeur de faire simplement tourner la commande npm install pour installer tous les paquets d’un coup.
Les paquets que j’utilise le plus souvent sont :

  • gulp est un automatiseur de tâches, répertoriées dans un fichier gulpfile.js
  • bower est un outil de gestion de dépendances frontend (l’équivalent frontend de composer, pour le backend)
  • gulp-less est un outil de compilation de LESS en CSS
  • gulp-coffee est un outil de compilation de coffeescript en JavaScript
  • gulp-concat est un outil de concaténation de sources en un fichier
  • gulp-minify-css est un minifieur de CSS
  • gulp-include permet de faire des inclusions de fichiers via la ligne #=include relative/path/to/file.coffee

 

2. Préparer les tâches Gulp

Créer ensuite un fichier gulpfile.js :

var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var include = require("gulp-include");

var paths = {
  coffee: [
    'src/ACSEO/FrontBundle/Resources/public/coffee/main.coffee'
  ],
  less: [
    'src/ACSEO/FrontBundle/Resources/public/less/main.less'
  ]
};

gulp.task('coffee', function() {
  return gulp.src(paths.coffee)
    .pipe(include())
    .pipe(concat('all.js'))
    .pipe(coffee({bare:true}))
    .pipe(gulp.dest('./web/js'));
});

gulp.task('styles', function () {
  return gulp.src(paths.less)
    .pipe(less())
    .pipe(minifyCSS())
    .pipe(gulp.dest('./web/css'));
});

gulp.task('build', ['styles', 'coffee']);

gulp.task('watch', function() {
  gulp.watch('src/ACSEO/**/*.less', ['styles']);
  gulp.watch(paths.coffee, ['coffee']);
});

gulp.task('default', ['build', 'watch']);

Dans cette tâche assez complète, j’importe tout d’abord les paquets dont j’ai besoin. Tout en bas, je prépare une tâche par défaut, lancée à l’exécution de la commande gulp. Elle va lancer les tâches build et watch. Ma tâche build a pour rôle de générer le CSS (style) et le JS (coffee). Ma tâche watch va écouter les modifications des fichiers situés dans mon tableau paths.less et paths.coffee et va exécuter les tâches styles ou coffee en fonction du fichier modifié. La tâche coffee va aller chercher tous les fichiers répertoriés dans paths.coffee, va inclure tous les fichiers appelés via include, va les concaténer dans un fichier all.js, va les transformer en JS et placer ce fichier dans web/js/all.js.

 

La tâche styles va aller chercher tous les fichiers LESS du projet, va les transformer en CSS, les minifier, et les places dans le répertoire web/css.

Utiliser la commande gulp pour lancer ces tâches, et la laisser tourner en tâche de fond pour que les fichiers soient recréés à chaque modification.

Pour information, si vous créez un nouveau fichier, gulp-watch ne va pas pouvoir le prendre en compte. Il vous faudra couper et relancer gulp.

3. Installer nos dépendances web avec Bower

Créer un fichier bower.json

{
  "name": "mon-super-projet",
  "authors": [
    "Nicolas Kern <nicolas.kern@acseo-conseil.fr>"
  ],
  "description": "Mon Super Projet",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "http://www.acseo-conseil.fr",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "web/assets/vendor/",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "^3.3.6",
    "jquery": "1.11"
  }
}

Nous installons ici les dernières versions de jQuery et Bootstrap.
Pour installer d’autres paquets, exécuter la commande bower install monpaquet –save
Les paquets peuvent être trouvés sur http://bower.io/search/

Pour installer tous les paquets du fichier bower.json, exécuter la commande bower install.

4. Utiliser nos dépendances (autrement tout ce qu’on vient de faire ne sert pas à grand chose)

Il vous suffit de simplement appeler les fichiers CSS générés ainsi que all.js.

Si vous utilisez Symfony :

<link rel="stylesheet" href="{{ asset('assets/vendor/bootstrap/dist/css/bootstrap.min.css') }}">
<script src="{{ asset('assets/vendor/jquery/dist/jquery.min.js') }}"></script>

5. Réflexions autour du concept

Pourquoi utiliser Gulp plutôt que les assets de Symfony ?
Est-ce mieux ? Pire ? Quoi préférer ?
Comment minifier et compiler les vendeurs JS ?

Ces questions sont à approfondir, quel est votre avis ?

Discover the four classical arts of language that form the essential foundation for all www.writemyessay4me.org learning