La puissance d'un task runner vient aussi de sa capacité à automatiquer des traitements sur les fichiers. Il existe tout un ecosystème de modules npm qui peuvent optimiser, minifier, préprocesser vos fichiers HTML, CSS et JS. Nous allons voir en bonus comment automatiser la génération et la publication de ces traitements.
Pour l'exemple, nous allons choisir d'automatiser la minification et la fusion des fichiers CSS et JS du thème "Lux" fournit par Kiubi. Ce thème comporte un essemble de fichiers CSS présent dans /theme/fr/assets/css/ qui sont minifiés et fusionnés dans la fichier compact.min.css. De même pour les fichiers JS présents dans /theme/fr/assets/js/ qui sont minifiés et fusionnées dans compact.min.js.
Pour cela nous aurons besoin de modules npm complémentaires :
$ npm install --save-dev gulp-minify gulp-concat gulp-clean-css
Nous allons créer une nouvelle tâche "compress", composée d'une partie pour le traitement JS et une autre pour le traitement CSS. Il faut modifier le fichier gulpfiles.js pour importer plus de fonctions du module Gulp ainsi que les modules fraîchements installés :
const { watch, src, pipe, dest, parallel, series } = require('gulp');
const minify = require('gulp-minify');
const concat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
Deux nouvelles fonctions vont indiquer à Gulp comment fusionner les fichiers CSS et JS et où enregistrer le résultat. C'est bien sûr à adapter à votre thème graphique, mais cela va donner quelque chose comme :
function compressJS() {
return src([
'jquery-3.2.1.min.js',
'moment-with-locales.min.js',
'bootstrap-datetimepicker.min.js',
'lightbox.min.js',
'owl.carousel.min.js',
'easyzoom.min.js',
'jarallax.min.js',
'js.cookie.min.js',
'underscore-min.js',
'kiubi.js'
], {cwd:'theme/fr/assets/js'})
.pipe(minify({
ignoreFiles: ['*.min.js']
}))
.pipe(concat('compact.min.js'))
.pipe(dest('theme/fr/assets/js'))
}
function compressCSS() {
return src([
'feather.css',
'lightbox.min.css',
'owl.carousel.min.css',
'bootstrap-datetimepicker.min.css',
'aos.min.css',
], {cwd:'theme/fr/assets/css'})
.pipe(cleanCSS())
.pipe(concat('compact.min.css'))
.pipe(dest('theme/fr/assets/css'))
}
Enfin, la tâche "compress" elle-même, qui va lancer en parallèle les deux fonctions. Comme elles agissent sur des lots de fichiers bien distincts, il n'est pas nécessaire de les lancer l'une après l'autre, on gagne ainsi un peu de rapidité d'exécution.
exports.compress = parallel(compressJS, compressCSS);
On peut maintenant tester rapidement la compression en appellant directement la tâche Gulp :
$ gulp compress
[12:12:56] Starting 'compress'...
[12:12:56] Starting 'compressJS'...
[12:12:56] Starting 'compressCSS'...
[12:12:56] Finished 'compressCSS' after 39 ms
[12:12:57] Finished 'compressJS' after 589 ms
[12:12:57] Finished 'compress' after 591 ms
Pour ne pas à avoir à lancer cette tâche à la main à chaque modification des fichiers CSS et JS, nous allons intégrer cette tâche aux deux autres tâches "watch" et "deploy". La modification la plus simple est pour la tâche "deploy". Il suffit d'indiquer à Gulp de lancer la compression et ensuite de déployer les fichiers :
exports.deploy = series(parallel(compressJS, compressCSS), deployTask);
Maintenant, on voit bien les tâches de compression se lancer avant le déploiement :
$ npm run deploy
[12:21:05] Starting 'deploy'...
[12:21:05] Starting 'compressJS'...
[12:21:05] Starting 'compressCSS'...
[12:21:05] Finished 'compressCSS' after 34 ms
[12:21:05] Finished 'compressJS' after 549 ms
[12:21:05] Starting 'deployTask'...
> theme/theme.xml
...
Transert de 8.77MiB en 103 sec
[12:22:47] Finished 'deployTask' after 1.7 min
[12:22:47] Finished 'deploy' after 1.7 min
Pour la commande "watch", on va modifier la fonction watchTask pour demander à Gulp de surveiller spécifiquement les fichiers JS et CSS et de lancer les compressions au besoin.
function watchTask() {
sync.watch(watch('theme/**', { events: 'all' }));
watch(
['theme/fr/assets/js/*.js', '!theme/fr/assets/js/compact.min.js'],
{ events: 'change' },
compressJS
);
watch(
['theme/fr/assets/css/*.css', '!theme/fr/assets/css/compact.min.css'],
{ events: 'change' },
compressCSS
);
}
Ainsi, quand par exemple un fichier CSS est modifié, kiubi-sync le publie sur le serveur distant puis Gulp compresse les fichiers CSS et produit un nouveau fichier compact.min.css. Cette modification est réinterceptée par kiubi-sync qui va également publier ce fichier sur le serveur distant. Au final, les fichiers sources et les versions compressés sont publiées automatiquement !
$ npm run watch
Publication des modifications...
> theme/fr/assets/css/custom.css
Transert de 19.74KiB en 1 sec
Publication des modifications...
> theme/fr/assets/css/compact.min.css
Transert de 50.64KiB en 1 sec
Le fichier guylpfile.js contentant toutes les étapes de ce tuto est disponible dans le dépot github.