순차적으로 Gulp 작업을 순차적으로 실행하는 방법

스 니펫에서 다음과 같이 :

gulp.task "coffee", ->
    gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean",->
    gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"

에서 develop작업 나는 실행할 clean와 당신이 일을 끝낼 후, 실행 coffee하고이 끝나면, 다른 뭔가를 실행합니다. 그러나 나는 그것을 알아낼 수 없습니다. 이 작품은 작동하지 않습니다. 조언 부탁드립니다.

아직 공식 릴리스는 아니지만 곧 출시 될 Gulp 4.0을 사용하면 gulp.series를 사용하여 동기 작업을 쉽게 수행 할 수 있습니다. 다음과 같이 간단하게 수행 할 수 있습니다.

gulp.task('develop', gulp.series('clean', 'coffee'))

예를 들어 gulp 4로 마이그레이션하는 방법과 깔끔한 ​​기능을 사용하는 방법을 소개하는 좋은 블로그 게시물을 발견했습니다.

기본적으로 gulp는 명시적인 종속성이없는 한 동시에 작업을 실행합니다. clean의존하지 않으려는 작업과 같은 작업에는 유용 하지 않지만 다른 작업보다 먼저 실행해야합니다.

gulp 로이 문제를 해결하기 위해 플러그인을 특별히 작성 했습니다run-sequence . 설치 한 후 다음과 같이 사용하십시오.

var runSequence = require('run-sequence');

gulp.task('develop', function(done) {
    runSequence('clean', 'coffee', function() {
        console.log('Run something else');
        done();
    });
});

README 패키지에 대한 전체 지침을 읽을 수 있습니다. 또한 일부 작업 세트를 동시에 실행할 수도 있습니다.

gulp의 다음 주요 릴리스 에서는 자동 의존성 순서를 완전히 제거하고 run-sequence원하는 방식으로 런 순서를 수동으로 지정할 수있는 것과 유사한 도구를 제공하므로 이는 효과적으로 수정 될 것 입니다.

그러나 이것은 중대한 변화이므로 run-sequence오늘 사용할 수있을 때까지 기다릴 이유가 없습니다 .

이 문제에 대한 유일한 좋은 해결책은 gulp 문서에서 찾을 수 있습니다.

var gulp = require('gulp');

// takes in a callback so the engine knows when it'll be done
gulp.task('one', function(cb) {
  // do stuff -- async or otherwise
  cb(err); // if err is not null and not undefined, the orchestration will stop, and 'two' will not run
});

// identifies a dependent task must be complete before this one begins
gulp.task('two', ['one'], function() {
  // task 'one' is done now
});

gulp.task('default', ['one', 'two']);
// alternatively: gulp.task('default', ['two']);

generator-gulp-webapp Yeoman 생성기를 사용하여 노드 / gulp 앱을 생성했습니다. 그것은 "깨끗한 수수께끼"를 이런 식으로 처리했습니다 (질문에 언급 된 원래 작업으로 번역).

gulp.task('develop', ['clean'], function () {
  gulp.start('coffee');
});

실행 순서 는 가장 명확한 방법입니다 (적어도 Gulp 4.0이 출시 될 때까지)

run-sequence를 사용 하면 다음과 같은 작업이 수행됩니다.

var sequence = require('run-sequence');
/* ... */
gulp.task('develop', function (done) {
    sequence('clean', 'coffee', done);
});

그러나 (어떤 이유로 든) 사용하지 않는 것을 선호한다면 gulp.start방법이 도움이 될 것입니다 .

gulp.task('develop', ['clean'], function (done) {
    gulp.on('task_stop', function (event) {
        if (event.task === 'coffee') {
            done();
        }
    });
    gulp.start('coffee');
});

참고 : 결과를 듣지 않고 작업 만 시작 develop하면 작업이보다 일찍 완료되어 coffee혼동 될 수 있습니다.

필요하지 않은 경우 이벤트 리스너를 제거 할 수도 있습니다

gulp.task('develop', ['clean'], function (done) {
    function onFinish(event) {
        if (event.task === 'coffee') {
            gulp.removeListener('task_stop', onFinish);
            done();
        }
    }
    gulp.on('task_stop', onFinish);
    gulp.start('coffee');
});

듣고 싶은 행사 가 있다고task_err 생각하십시오 . task_stop성공적으로 완료되면 트리거되고 task_err일부 오류가 발생하면 나타납니다.

에 대한 공식 문서가없는 이유가 궁금 할 수도 있습니다 gulp.start(). gulp 회원의 답변은 다음을 설명합니다.

gulp.start 복잡한 빌드 파일로 이어질 수 있기 때문에 의도적으로 문서화되지 않았습니다.

(출처 : https://github.com/gulpjs/gulp/issues/426#issuecomment-41208007 )

Gulp 문서에 따르면 :

종속성이 완료되기 전에 작업이 실행 중입니까? 종속성 작업이 비동기 실행 힌트를 올바르게 사용하고 있는지 확인하십시오. 콜백을 받거나 약속 또는 이벤트 스트림을 반환하십시오.

일련의 작업을 동기식으로 실행하려면

1. 이벤트 스트림을 반환합니다 (예 : gulp.src 하는) gulp.task경우 스트림 끝의 작업을 알리기 위해.
2. 두 번째 인수에서 작업 종속성 선언 gulp.task .

수정 된 코드를 참조하십시오.

gulp.task "coffee", ->
    return gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean", ['coffee'], ->
      return gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"

나는이 똑같은 문제를 겪고 있었고 해결책은 꽤 쉽다는 것이 밝혀졌다. 기본적으로 코드를 다음과 같이 변경하면 작동합니다. 참고 : gulp.src 이전의 귀환은 저에게 큰 차이를 만들었습니다.

gulp.task "coffee", ->
    return gulp.src("src/server/**/*.coffee")
        .pipe(coffee {bare: true}).on("error",gutil.log)
        .pipe(gulp.dest "bin")

gulp.task "clean",->
    return gulp.src("bin", {read:false})
        .pipe clean
            force:true

gulp.task 'develop',['clean','coffee'], ->
    console.log "run something else"

제안 된 모든 솔루션을 시도했지만 모두 자체 문제가있는 것 같습니다.

실제로 Orchestrator 소스, 특히 .start()구현을 살펴보면 마지막 매개 변수가 함수이면 콜백으로 취급한다는 것을 알 수 있습니다.

나는 내 자신의 작업을 위해이 스 니펫을 썼다 :

  gulp.task( 'task1', () => console.log(a) )
  gulp.task( 'task2', () => console.log(a) )
  gulp.task( 'task3', () => console.log(a) )
  gulp.task( 'task4', () => console.log(a) )
  gulp.task( 'task5', () => console.log(a) )

  function runSequential( tasks ) {
    if( !tasks || tasks.length <= 0 ) return;

    const task = tasks[0];
    gulp.start( task, () => {
        console.log( `${task} finished` );
        runSequential( tasks.slice(1) );
    } );
  }
  gulp.task( "run-all", () => runSequential([ "task1", "task2", "task3", "task4", "task5" ));

나는이 답변을 잠시 동안 찾고있었습니다. 이제 공식 펄프 문서에서 얻었습니다.

마지막 작업이 완료되었을 때 꿀꺽 꿀꺽 작업을 수행하려면 스트림을 반환해야합니다.

gulp.task('wiredep', ['dev-jade'], function () {
    var stream = gulp.src(paths.output + '*.html')
        .pipe($.wiredep())
        .pipe(gulp.dest(paths.output));

    return stream; // execute next task when this is completed
});

// First will execute and complete wiredep task
gulp.task('prod-jade', ['wiredep'], function() {
    gulp.src(paths.output + '**/*.html')
        .pipe($.minifyHtml())
        .pipe(gulp.dest(paths.output));
});

간단하게 coffee의존 clean하고 develop에 따라 달라집니다 coffee:

gulp.task('coffee', ['clean'], function(){...});
gulp.task('develop', ['coffee'], function(){...});

파견은 이제 시리얼 : clean→ coffee→ develop. 주의 clean의 구현과 coffee의 구현 해야한다 , 콜백을 받아 "그것을 할 것이다 때 엔진이 알 수 있도록" :

gulp.task('clean', function(callback){
  del(['dist/*'], callback);
});

결론적으로, 아래는 비동기 빌드 의존성이 따르는 동기에 대한 간단한 펄프 패턴입니다clean .

//build sub-tasks
gulp.task('bar', ['clean'], function(){...});
gulp.task('foo', ['clean'], function(){...});
gulp.task('baz', ['clean'], function(){...});
...

//main build task
gulp.task('build', ['foo', 'baz', 'bar', ...], function(){...})

Gulp는 얼마나 많은 종속성이 의존 하든 관계없이 clean정확히 한 번만 실행할 수 있을 정도로 똑똑 합니다 . 위에서 쓴 것처럼 동기화 장벽이 있고 모든 종속성이 병렬로 실행 된 다음 실행됩니다.buildbuildcleancleanbuildbuild

나를 위해 연결 된 입력을 예상하고 연결이 생성되지 않았기 때문에 연결 후 축소 작업을 실행하지 않았습니다.

실행 순서대로 기본 작업에 추가하려고 시도했지만 작동하지 않았습니다. return각 작업에 대해 하나만 추가 하고 gulp.start()아래처럼 축소를 얻은 후에 작동했습니다 .

/**
* Concatenate JavaScripts
*/
gulp.task('concat-js', function(){
    return gulp.src([
        'js/jquery.js',
        'js/jquery-ui.js',
        'js/bootstrap.js',
        'js/jquery.onepage-scroll.js',
        'js/script.js'])
    .pipe(maps.init())
    .pipe(concat('ux.js'))
    .pipe(maps.write('./'))
    .pipe(gulp.dest('dist/js'));
});

/**
* Minify JavaScript
*/
gulp.task('minify-js', function(){
    return gulp.src('dist/js/ux.js')
    .pipe(uglify())
    .pipe(rename('ux.min.js'))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('concat', ['concat-js'], function(){
   gulp.start('minify-js');
});

gulp.task('default',['concat']); 

소스 http://schickling.me/synchronous-tasks-gulp/

Gulp와 Node는 약속을 사용 합니다 .

그래서 당신은 이것을 할 수 있습니다 :

// ... require gulp, del, etc

function cleanTask() {
  return del('./dist/');
}

function bundleVendorsTask() {
  return gulp.src([...])
    .pipe(...)
    .pipe(gulp.dest('...'));
}

function bundleAppTask() {
  return gulp.src([...])
    .pipe(...)
    .pipe(gulp.dest('...'));
}

function tarTask() {
  return gulp.src([...])
    .pipe(...)
    .pipe(gulp.dest('...'));
}

gulp.task('deploy', function deployTask() {
  // 1. Run the clean task
  cleanTask().then(function () {
    // 2. Clean is complete. Now run two tasks in parallel
    Promise.all([
      bundleVendorsTask(),
      bundleAppTask()
    ]).then(function () {
      // 3. Two tasks are complete, now run the final task.
      tarTask();
    });
  });
});

gulp 스트림을 반환하면이 then()메서드를 사용하여 콜백을 추가 할 수 있습니다 . 또는 Node의 고유 Promise를 사용하여 자신의 약속을 만들 수 있습니다. 여기에 Promise.all()모든 약속이 해결되면 발생하는 콜백이 하나 있습니다.

이 버그를 사용해보십시오 :-) 비동기 버그 용 Gulp v3.x 핵

나는 Readme의 모든 "공식적인"방법을 시도했지만 그들은 나를 위해 일하지 않았지만 이것은 효과가있었습니다. gulp 4.x로 업그레이드 할 수도 있지만 그렇게하지 않는 것이 좋습니다. 진짜 js promise를 사용할 수는 있지만, 이것은 빠르고 더럽고 간단합니다 :-) 본질적으로 다음을 사용합니다.

var wait = 0; // flag to signal thread that task is done
if(wait == 0) setTimeout(... // sleep and let nodejs schedule other threads

게시물을 확인하십시오!