Objectif
L’objectif de cet article est d’ajouter une tâche Gulp à vos build définis sur VSTS pour compiler et minifier les fichiers .less.
Prérequis
- Un projet VSTS avec une application web ASP.NET.
- Une définition de build pour l’application ASP.NET du projet
- Installer Node.js :
- Sur le poste de développement pour définir la tâche Gulp
- Sur le serveur de build, pour exécuter la tâche Gulp
Création de la tâche Gulp
La création de la tâche Gulp pour compiler et minimiser les fichier .less en fichier .min.css, est faite sur un poste de développement au sein de visual studio 2015.
Poste de développement
Prérequis
En plus de l’utilisation de visual studio 2015, il faut installer :
- Node.js : pour la gestion et l’exécution des package npm. A télécharger ici
- Task Runner Explorer: Il s’agit d’une extension pour Visual Studio afin de tester et gérer les tâches Gulp. A télécharger ici
Configurer gulp pour l’application web
Il faut ajouter au projet de l’application web 2 fichiers afin de configurer gulp :
- gulpfile.js : contient les définitions des tâches Gulp à exécuter
- package.json : contient les listes des packages nécessaire à l’exécution des tâches définies dans le fichiers précédents
Script de la tâche gulp « less » pour compiler et minifier les fichiers .less en .min.css
var gulp = require('gulp');
var less = require('gulp-less');
var path = require('path');
var watch = require("gulp-watch");
var rename = require('gulp-rename');
var minifyCSS = require('gulp-minify-css');
var plumber = require('gulp-plumber');
gulp.task('less', function () {
return gulp.src('./Content/**/*.less')
.pipe(plumber())
.pipe(less({
paths: [path.join(__dirname, 'less', 'includes')]
}).on('error', function (err) {
console.log(err);
}))
.pipe(minifyCSS().on('error', function(err) {
console.log(err);
}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./content/'));
});
{
"name": "Mon projet",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-less": "^3.3.0",
"gulp-rename": "^1.2.2",
"gulp-minify-css": "^1.2.4",
"gulp-watch": "^4.3.11",
"gulp-plumber": "^1.1.0"
}
}
Tester la tâche Gulp
Sous Visual Studio :
- Cliquez droit sur le fichier gulpfile.js
- Dans « l’explorateur de solution »cliquez sur « Task Runner Explorer »
- Dans la fenêtre de « Task Runner Explorer », Cliquez droit sur la tache « install » du package.json
- Cliquez sur « Run »pour installer les packages en local à la solution
- Dans la fenêtre de « Task Runner Explorer », Cliquez droit sur la tache « less »
- Cliquez sur « Run »pour exécuter le test de la tâche
Ajouter la tâche au build VSTS
Prérequis sur le serveur de build
Le serveur de build doit contenir tout le nécessaire à la compilation de la solution. Node.js doit donc être installé sur le serveur de build. A télécharger ici
Modification de la définition du build VSTS
- Connectez sur VSTS
- Allez dans « Build & Realease »/Builds
- Editez la définition du build pour lequel vous souhaitez ajouter la tâche Gulp
- Ajoutez une tache « NPM »
- Configurez cette tache afin d’installer les package npm nécessaire à l’exécution sur la tâche gulp précédemment créée: « less »
- Working folder : répertoire du projet contenant le fichier package.json
- npm command : install
- arguments : -config
- Ajoutez une tâche « Gulp » afin d’exécuter la tache « less »
- Configurez cette tâche afin d’exécuter la tâche gulp précédemment créée: « less »
- Gulp File Path : Chemin du répertoire du projet contenant le fichier gulpfile.js
- Gulp Task(s) : nom de la tâche à exécuter
- Arguments : Arguments nécessaire à la tâche
- Working Directory : Chemin du répertoire de travail, comme on travaille avec les packages npm définis pour le projet, il s’agit du répertoire du projet
- Cliquez sur « Save »
Maintenant votre build VSTS exécute une tâche Gulp pour compiler et minifier les fichiers .less !
