Gulp 오류 : 다음 작업이 완료되지 않았습니다. 비동기 완료를 신호하는 것을 잊었습니까?

다음과 같은 gulpfile.js가 있으며 명령 줄 gulp 메시지 를 통해 실행 합니다 .

var gulp = require('gulp');

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

다음과 같은 오류 메시지가 나타납니다.

[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?

Windows 10 시스템에서 gulp 4를 사용하고 있습니다. 출력은 다음과 같습니다 gulp --version.

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

작업에 비동기 코드가 포함될 수 있으므로 작업 실행이 완료되면 꿀꺽 소리를 내야합니다 (= "비동기 완료").

Gulp 3.x에서는이 작업을 수행하지 않고도 벗어날 수 있습니다. 비동기 완료를 명시 적으로 신호하지 않으면 gulp는 작업이 동 기적이며 작업 함수가 반환되는 즉시 완료된 것으로 가정합니다. Gulp 4.x는 이와 관련하여 더 엄격합니다. 당신은 할 필요가 명시 적으로 작업 완료 신호.

6 가지 방법으로 이를 수행 할 수 있습니다 .

1. 스트림 반환

이것은 무언가를 인쇄하려고 할 때 실제로는 옵션이 아니지만 일반적으로 꿀꺽 꿀꺽 처리하는 작업이므로 가장 자주 사용되는 비동기 완료 메커니즘 일 것입니다. 다음은 유스 케이스에 대한 데모 예제입니다.

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

gulp.task('message', function() {
  return gulp.src('package.json')
    .pipe(print(function() { return 'HTTP Server Started'; }));
});

여기서 중요한 부분은 return진술입니다. 스트림을 반환하지 않으면 gulp에서 스트림이 완료된 시점을 확인할 수 없습니다.

2. 반품 Promise

이것은 사용 사례에 훨씬 더 적합한 메커니즘입니다. 대부분의 경우 Promise객체를 직접 만들 필요는 없으며 일반적으로 패키지에서 제공합니다 (예 : 자주 사용하는 del패키지는을 반환 함 Promise).

gulp.task('message', function() { 
  return new Promise(function(resolve, reject) {
    console.log("HTTP Server Started");
    resolve();
  });
});

async / await 구문을 사용하면 이 과정을 더욱 단순화 할 수 있습니다. 표시된 모든 함수는 async내재적으로 Promise를 반환하므로 다음도 작동합니다 ( node.js 버전에서 지원하는 경우 ).

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

3. 콜백 함수를 호출

이것은 아마도 유스 케이스에 가장 쉬운 방법 일 것입니다 : gulp는 콜백 함수를 첫 번째 인수로 자동으로 작업에 전달합니다. 완료되면 해당 함수를 호출하십시오.

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

4. 자식 프로세스를 반환

사용 가능한 node.js 랩퍼가 없기 때문에 명령 행 도구를 직접 호출해야하는 경우에 유용합니다. 그것은 당신의 유스 케이스에서 작동하지만 분명히 나는 ​​그것을 추천하지 않을 것입니다 (특히 이식성이 좋지 않기 때문에).

var spawn = require('child_process').spawn;

gulp.task('message', function() {
  return spawn('echo', ['HTTP', 'Server', 'Started'], { stdio: 'inherit' });
});

5. RxJS를Observable 반환하십시오 .

이 메커니즘을 사용한 적이 없지만 RxJS를 사용하는 경우 유용 할 수 있습니다. 무언가를 인쇄하고 싶다면 과잉입니다.

var of = require('rxjs').of;

gulp.task('message', function() {
  var o = of('HTTP Server Started');
  o.subscribe(function(msg) { console.log(msg); });
  return o;
});

6. 반품 EventEmitter

이전과 마찬가지로 완전성을 위해 이것을 포함했지만 이미 EventEmitter어떤 이유로 든 사용하지 않는 한 실제로 사용할 수는 없습니다 .

gulp.task('message3', function() {
  var e = new EventEmitter();
  e.on('msg', function(msg) { console.log(msg); });
  setTimeout(() => { e.emit('msg', 'HTTP Server Started'); e.emit('finish'); });
  return e;
});

Gulp 4의 문제 .

이 문제를 해결하려면 현재 코드를 변경하십시오.

gulp.task('simpleTaskName', function() {
  // code...
});

예를 들면 다음과 같습니다.

gulp.task('simpleTaskName', async function() {
  // code...
});

또는 이것으로 :

gulp.task('simpleTaskName', done => {
  // code...
  done();
});

이것은 효과가 있었다!

gulp.task('script', done => {
    // ... code gulp.src( ... )
    done();
});

gulp.task('css', done => {
    // ... code gulp.src( ... )
    done();
});

gulp.task('default', gulp.parallel(
        'script',
        'css'
  )
);

매우 간단한 SASS / CSS 빌드 를 실행하려고 할 때 이와 동일한 오류가 발생했습니다 .

내 솔루션 (이와 같거나 유사한 오류를 해결할 수 있음)은 done기본 작업 기능에서 매개 변수 로 추가 하고 기본 작업이 끝날 때 호출하는 것입니다.

// Sass configuration
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('*.scss')
        .pipe(sass())
        .pipe(gulp.dest(function (f) {
            return f.base;
        }))
});

gulp.task('clean', function() {
})

gulp.task('watch', function() {
    gulp.watch('*.scss', ['sass']);
})


gulp.task('default', function(done) { // <--- Insert `done` as a parameter here...
    gulp.series('clean','sass', 'watch')
    done(); // <--- ...and call it here.
})

도움이 되었기를 바랍니다!

다음 두 가지를 수행해야합니다.

1. async기능 전에 추가하십시오 .

2. 로 기능을 시작하십시오 return.

   var gulp = require('gulp');
   
   gulp.task('message', async function() {
       return console.log("HTTP Server Started");
   });

나는 이것에 대해 매우 잘 알고 있다고 주장 할 수는 없지만 같은 문제가있어서 해결했습니다.

async function 을 사용하여이를 해결하는 7 번째 방법이 있습니다 .

함수를 작성하되 접두어 async를 추가하십시오 .

이렇게하면 Gulp가 약속 한대로 기능을 감싸고 작업이 오류없이 실행됩니다.

예:

async function() {
  // do something
};

자원:

1. Gulp 페이지의 마지막 섹션 비동기 완료 : async / await 사용 .

2. Mozilla 비동기 함수 문서 .

이것은 gulp 버전 3에서 4로 마이그레이션 할 때 발생하는 문제입니다. 간단히 콜백 함수에 수행 된 매개 변수를 추가 할 수 있습니다 (예 :

   const gulp = require("gulp")

    gulp.task("message", function(done) {
      console.log("Gulp is running...")
      done()
    });

해결 방법 : 콜백 함수 (작업 및 익명)를 호출해야합니다.

function electronTask(callbackA)
{
    return gulp.series(myFirstTask, mySeccondTask, (callbackB) =>
    {
        callbackA();
        callbackB();
    })();    
}

여기 갈 : 없음 동기 작업을 .

동기 작업 없음

동기 작업이 더 이상 지원되지 않습니다. 그들은 종종 작업에서 스트림을 반환하는 것을 잊어 버리는 것과 같이 디버그하기 어려운 미묘한 실수로 이어졌습니다.

당신이 볼 때 Did you forget to signal async completion?경고를, 위에서 언급 한 기술도 사용하지 않았다. 이 오류를 해결하려면 오류 우선 콜백을 사용하거나 스트림, 약속, 이벤트 이미 터, 하위 프로세스 또는 관찰 가능 항목을 반환해야합니다.

async/ 사용await

이전 옵션을 사용하지 않을 경우, 당신은 같은 작업을 정의 할 수 있습니다 async functionA의 당신의 작업을 래핑, 약속을 . 이를 통해 await다른 동기 코드를 사용 하고 동시에 약속을 처리 할 수 ​​있습니다 .

const fs = require('fs');

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

exports.default = asyncAwaitTask;

기본적으로 v3.X는 더 단순하지만 v4.x는 이러한 동기 및 비동기 작업 수단에서 엄격합니다.

비동기 / AWAIT은 아주 간단합니다 및 워크 플로우 및 문제를 이해하는 유용한 방법입니다.

이 간단한 접근법을 사용하십시오

const gulp = require('gulp')

gulp.task('message',async function(){
return console.log('Gulp is running...')
})

최근 에이 문제로 어려움을 겪고 있었고 다음 에 default실행 되는 작업 을 만드는 올바른 방법을 찾았습니다 .sasssass:watch

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

내 해결책 : 비동기식으로 모든 것을 넣고 꿀꺽 기다립니다.

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;

기본 기능에서 매개 변수로 완료를 추가하십시오. 그렇게 할 것입니다.

swagger 로컬 배포에 gulp를 사용하려는 경우 다음 코드가 도움이 될 것입니다.

var gulp = require("gulp");
var yaml = require("js-yaml");
var path = require("path");
var fs = require("fs");

//Converts yaml to json
gulp.task("swagger", done => {
    var doc = yaml.safeLoad(fs.readFileSync(path.join(__dirname,"api/swagger/swagger.yaml")));
    fs.writeFileSync(
        path.join(__dirname,"../yourjsonfile.json"),
        JSON.stringify(doc, null, " ")
        );
    done();
});

//Watches for changes    
gulp.task('watch', function() {
  gulp.watch('api/swagger/swagger.yaml', gulp.series('swagger'));  
});

나를 위해 문제가 달랐습니다 : Angular-cli가 설치되지 않았습니다 (NVM을 사용하여 새 노드 버전을 설치하고 단순히 각도 cli를 다시 설치하는 것을 잊어 버렸습니다)

"ng version"실행을 확인할 수 있습니다.

그렇지 않은 경우 "npm install -g @ angular / cli"를 실행하십시오.

한 가지를해야합니다.

• async기능 전에 추가하십시오 .

const gulp = require('gulp');

gulp.task('message', async function() {
    console.log("Gulp is running...");
});