Erreur Gulp : Les tâches suivantes n'ont pas été effectuées : Avez-vous oublié de signaler l'achèvement asynchrone ?

Question

J'ai les éléments suivants gulpfile.js que j'exécute via la ligne de commande. message gulp :

var gulp = require('gulp');

gulp.task('message', function() {
  console.log("HTTP Server Started");
});

Je reçois le message d'erreur suivant :

[14:14:41] Using gulpfile ~\Documents\node\first\gulpfile.js
[14:14:41] Starting 'message'...
HTTP Server Started
[14:14:41] The following tasks did not complete: message
[14:14:41] Did you forget to signal async completion?

J'utilise gulp 4 sur un système Windows 10. Voici la sortie de gulp --version :

[14:15:15] CLI version 0.4.0
[14:15:15] Local version 4.0.0-alpha.2

Answer 1

Voilà : Pas de tâches synchrones .

Pas de tâches synchrones

Les tâches synchrones ne sont plus prises en charge. Elles conduisaient souvent à des erreurs subtiles et difficiles à déboguer, comme oublier de renvoyer vos flux depuis une tâche.

Lorsque vous voyez le Did you forget to signal async completion? l'avertissement, aucune des techniques mentionnées ci-dessus n'a été utilisée. Vous devrez utiliser le rappel error-first ou renvoyer un flux, une promesse, un émetteur d'événements, un processus enfant ou un observable pour résoudre le problème.

Utilisation de async / await

Si vous n'utilisez pas l'une des options précédentes, vous pouvez définir votre tâche en tant que async function qui englobe votre tâche dans un promesse . Cela vous permet de travailler avec des promesses de manière synchrone en utilisant await et utiliser d'autres codes synchrones.

const fs = require('fs');

async function asyncAwaitTask() {
  const { version } = fs.readFileSync('package.json');
  console.log(version);
  await Promise.resolve('some result');
}

exports.default = asyncAwaitTask;

Answer 2

Ma solution : tout mettre avec async et attendre gulp.

async function min_css() {
    return await gulp
        .src(cssFiles, { base: "." })
        .pipe(concat(cssOutput))
        .pipe(cssmin())
        .pipe(gulp.dest("."));
}

async function min_js() {
    return await gulp
        .src(jsFiles, { base: "." })
        .pipe(concat(jsOutput))
        .pipe(uglify())
        .pipe(gulp.dest("."));  
}

const min = async () => await gulp.series(min_css, min_js);

exports.min = min;

Answer 3

La solution est simple, mais je décris les changements que j'ai faits, l'erreur que j'ai eue, mon fichier gulp avant et après, et les versions des paquets - ce qui le fait paraître très long.

J'ai résolu ce problème en suivant les instructions de plusieurs réponses précédentes, en plus de suivre l'erreur affichée lorsque je sauvegardais mon fichier .scss.

En bref :

• J'ai changé la façon dont gulp-sass a été importé - voir (A)

• J'ai changé toutes les fonctions en fonctions ASYNC - voir (B)

(A) Modifications apportées à l'importation de gulp-sass :

• Avant : var sass = require('gulp-sass)
• Après : var sass = require('gulp-sass')(require('sass'));

(B) Il suffit de convertir les fonctions en ASYNC-

A quoi ressemblait mon gulpfile avant :

'use strict';

// dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');

var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';

function compile_scss() {
    return gulp.src(SCSS_SRC)
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
}

function watch_scss() {
    gulp.watch(SCSS_SRC, compile_scss);
}

gulp.task('default', watch_scss); //Run tasks

exports.compile_scss = compile_scss;
exports.watch_scss = watch_scss;

A quoi ressemblait mon fichier gulpfile après :

'use strict';

// dependencies
var gulp = require('gulp');
//var sass = require('gulp-sass');
var sass = require('gulp-sass')(require('sass'));
var minifyCSS = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var changed = require('gulp-changed');

var SCSS_SRC = './src/Assets/scss/**/*.scss';
var SCSS_DEST = './src/Assets/css';

async function compile_scss() {
    return gulp.src(SCSS_SRC)
        .pipe(sass().on('error', sass.logError))
        .pipe(minifyCSS())
        .pipe(rename({ suffix: '.min' }))
        .pipe(changed(SCSS_DEST))
        .pipe(gulp.dest(SCSS_DEST));
}

async function watch_scss() {
    gulp.watch(SCSS_SRC, compile_scss);
}

gulp.task('default', watch_scss); // Run tasks

exports.compile_scss = compile_scss;
exports.watch_scss = watch_scss;

Versions du paquet :

"gulp": "^4.0.2",
"gulp-changed": "^4.0.3",
"gulp-rename": "^2.0.0",
"gulp-uglify": "^3.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-sass": "^5.0.0",
"sass": "^1.38.0"

L'erreur que je recevais :

Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

[14:00:37] The following tasks did not complete: default, compile_scss
[14:00:37] Did you forget to signal async completion?

Answer 4

Je me suis battu avec cela récemment, et j'ai trouvé la bonne façon de créer un default tâche qui exécute sass entonces sass:watch était :

gulp.task('default', gulp.series('sass', 'sass:watch'));

Answer 5

Dans gulp version 4 et plus, il est nécessaire que toutes les tâches gulp indiquent à Gulp où la tâche se terminera. Nous faisons cela en appelant une fonction qui est passée comme premier argument dans notre fonction de tâche

var gulp = require('gulp');
gulp.task('first_task', function(callback) {
  console.log('My First Task');
  callback();
})