Information relative à l'utilisation des données personnelles

Le site pajagus.fr utilise des cookies pour analyser le trafic sur le site.

Seules les données nécessaires à l'agent Google Analytics sont enregistrées. Ces informations sont utilisées pour générer des rapports de connexions, sessions, pages vues, provenance des visiteurs...

Aucune autre information n'est enregistrée par le site pajaguse.fr.

En utilisant ce site vous acceptez l'utilisation de ces cookies.

Erreur Gulp après mise à jour

gulpjsSuite à la mise à jour du programme Gulp mes scripts ne fonctionnaient plus du tout. J’utilise Gulp pour compresser les fichiers JS et traiter les fichiers CSS au format LESS.

Pour plus d’informations sur Gulp : https://www.pajagus.fr/theblog/programmation/gulpjs-compilation-less-et-minification-js-et-css/

Après plusieurs recherches sur le net j’a itrouvé les solutions à mes problèmes. Mais il faut avouer que c’est pénible suite à une mise à jour de passer du temps (beaucoup parfois) à chercher pourquoi plus rien ne marche.

Pour en revenir à mes problèmes avec Gulp. C’est au niveau de du fichier qui définit les ‘task’ que le problème se situait. Tout simplement parceque la syntaxe a ‘évolué’ et certains appels de fonction ne fonctionnent plus comme avant… (merci au dev qui s’est dit : tiens je vais modifier le schéma d’appel de la fonction…).

Voici le code que j’utilisais auparavant pour mes tasks Gulp :

// définition des tasks 
gulp.task( 'default' , function() {
 gulp.watch(cssSrc,['task_css']);
 gulp.watch(jsSrc,['task_js']);
 gulp.watch(mymvcJsSrc,['task_mymvc_js']);
 gulp.watch(mymvcCssSrc,['task_mymvc_css']);
 gulp.watch(PROJET_HOME+"src/css/prod/*.less",['task_css_prod']);
});

// task pour les fichiers JS
gulp.task( 'task_js' , function() {
 return gulp.src(jsSrc)
 .pipe(concat('shyrkaOne.js'))
 .pipe(gulp.dest(jsDest))
 .pipe(rename('shyrkaOne.min.js'))
 .pipe(uglify())
 .pipe(gulp.dest(jsDest));
});

Voici les modifs à apporter pour que tout fonctionne correctement avec Gulp 4.x :

Dans gulp.task() il faut remplacer le tableau contenant le nom de la task [‘task_css’] par  gulp.series(‘task_css’) .

Dans chaque task il y a un nouveau paramètre en entrée de la fonction qui est une fonction de callback. Il faut appeler cette fonction à la fin de la task :

gulp.task('task_js', function(cb) { 
...
...
cb();
});

Voila c’est pas compliqué bordel !! mais bon si on le sait pas ben on passe de long moments à chercher un problème ailleur. J’ai par exemple entièrement desinstallé nodejs, gulp etc…

Soyons optimiste tout fonctionne à nouveau, jusqu’a la prochaine mise à jour 🙂

Voici le fichier complet modifié :

/**
Minify les fichiers JS depuis src/js et concat dans static/js/scripts.min.js
Traitement LESS des fichiers CSS dans src/css et minification dans static/css/*.min.css
*/
var gulp = require('gulp'); // 4.0.0 
// modules gulp
var concat = require('gulp-concat'); // 2.6.1
var rename = require('gulp-rename'); // 4.0 
var uglify = require('gulp-uglify'); //3.0.2
var less = require('gulp-less'); // 4.0.1
var minifyCSS = require('gulp-clean-css'); // 4.0.0
var PROJET_HOME = "Developpement/Code/Projets/";
var JS_MAIN = "titV3";
var jsSrc = PROJET_HOME + 'src/js/*.js', jsDest = PROJET_HOME + 'static/js';
var cssSrc = PROJET_HOME + 'src/css/*.less', cssDest = PROJET_HOME + 'static/css';

/* Watcher */
gulp.task('default',function() {
 gulp.watch(cssSrc,gulp.series('task_css')); // modif pour V4
 gulp.watch(jsSrc,gulp.series('task_js')); // modif pour V4
});

// fichiers JS
gulp.task('task_js', function(cb) {
 return gulp.src(jsSrc)
 .pipe(concat(JS_MAIN+'.js'))
 .pipe(gulp.dest(jsDest))
 .pipe(rename(JS_MAIN+'.min.js'))
 .pipe(uglify())
 .pipe(gulp.dest(jsDest));
 cb();
});

// fichiers CSS
gulp.task('task_css',function(cb) {
 gulp.src(cssSrc)
 .pipe(less())
 .pipe(minifyCSS())
 .pipe( rename(function (path) {
 path.basename += ".min";
 path.extname = ".css";
 }))
 .pipe(gulp.dest(cssDest));
 cb();
});

The end…

Pas de Commentaire

Qu'en pensez-vous ?

Votre formulaire contient des erreurs, merci de corriger.