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

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

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.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 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.
})

async function() {
  // do something
};

   const gulp = require("gulp")

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