Gulp.js 작업, src로 돌아 갑니까?


132

나는 꿀꺽 마시기 시작하고 예제 설정을 살펴 보았습니다. 어떤 사람들은 다음과 같은 구조를 가지고 있습니다 :

gulp.task("XXXX", function() {
    gulp.src("....

다른 사람들은 이것을 가지고 있습니다 :

gulp.task("XXXX", function() {
   return gulp.src("....

src 의 수익이 어떻게 다른지 궁금 합니다.

답변:


158

당신은 return작업이 비동기 있음을 나타냅니다. gulp.src()스트림을 반환하므로 비동기입니다.

그것이 없으면 작업 시스템은 언제 끝났는지 알 수 없습니다. 문서를 읽으십시오 .


우수한! 회신 Sindre 주셔서 감사합니다. 지금 꿀꺽 꿀꺽 거리며 달리세요. 그것을 사랑하십시오.
boldfacedesignuk

내가 뭘 찾고 있었는지 정확히 :)
Sebastien Lorber

14
당신이 사용할 때 반환 해야 한다는 것을 의미합니까 gulp.src()? 돌아 오지 않으면 어떻게됩니까 gulp.src()?
jbandi

11
두 번째 @ jbandi 's-여기에 물어보아야 할 분명한 질문은 "돌아 가지 않는 이유가 gulp.src(...있습니까, 아니면 항상해야합니까?"입니다. 이 답변이 그 점을 해결한다면 더 유용 할 것입니다. 현재는 호출 gulp.src(...하지만 반환하지 않는 작업이 많은 이유가 무엇인지 설명 하지 않습니다.
Mark Amery

2
@jbandi : 그렇지 않으면 return종속성 시스템이 종속성을 수행하기 전에 작업을 시작할 수 있습니다. 많은 작업 (주로 코드 생성)이있는 gulpfile이 있습니다. 스트림을 반환하지 않았기 때문에 종속성이 계속 빌드되는 동안 종속 작업이 이미 파일을 읽고있었습니다. 온갖 종류의 문제로 나를
데려갔습니다

37

종속 작업이 있는 경우 작업을 실행하기 전에 해당 작업이 종속 작업이 완료 될 때까지 기다리려면 스트림 을 반환 해야 합니다.

예 :

// without return
gulp.task('task1', function() {
    gulp.src('src/coffee/*.coffee')
      /* eg compile coffeescript here */
     .pipe(gulp.dest('src'));
});

gulp.task('task2', ['task1'], function() {
    gulp.src('src/*.js')
      /* eg minfify js here */
     .pipe(gulp.dest('dest'));
});

이 예제 에서는 task2 가 실행 되기 전에 task1 이 완료 될 것으로 예상 됩니다 (예 : coffeescript 또는 무엇이든 컴파일) . 그러나 아래 예제와 같이 return 을 추가 하지 않으면 비동기식으로 비동기식으로 실행됩니다. task2 는 태스크 1이 완료되기를 기다리지 않았 으므로 task1 의 컴파일 된 출력을 선택하지 않기 때문에 컴파일 된 coffeescript는 축소 되지 않습니다 . 따라서 우리는 항상 이런 상황에서 돌아와야합니다.

// with return
gulp.task('task1', function() {
    return gulp.src('**/*.coffee')
      /* your operations here */
     .pipe(gulp.dest('dest'));
});

gulp.task('task2', ['task1'], function() {
    return gulp.src('**/*.js')
      /* your operations here */
     .pipe(gulp.dest('dest'));
});

편집 : 여기의 레시피가 자세히 설명합니다. https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md


26

작업 당 여러 스트림이있는 경우이 기능이 유용하다는 것을 알았습니다. 여러 스트림을 결합 / 병합하여 반환해야합니다.

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

gulp.task('test', function() {
    var bootstrap = gulp.src('bootstrap/js/*.js')
        .pipe(gulp.dest('public/bootstrap'));

    var jquery = gulp.src('jquery.cookie/jquery.cookie.js')
        .pipe(gulp.dest('public/jquery'));

    return merge(bootstrap, jquery);
});

Gulps 작업 정의 구조를 사용하는 대안은 다음과 같습니다.

var gulp = require('gulp');

gulp.task('bootstrap', function() {
    return gulp.src('bootstrap/js/*.js')
        .pipe(gulp.dest('public/bootstrap'));
});

gulp.task('jquery', function() {
    return gulp.src('jquery.cookie/jquery.cookie.js')
        .pipe(gulp.dest('public/jquery'));
});

gulp.task('test', ['bootstrap', 'jquery']);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.