Gulp 처리되지 않은 스트림 오류가 있습니다.

Question

gulpfile을 사용하고 있습니다. 컴파일 된 CSS와 압축 된 CSS 파일에 소스 맵을 추가하려고했습니다. 컴파일 할 때

gulp.task('sass', function() { 
return gulp.src('./src/sass/zebra.scss') 

    .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer({ 
      browsers: autoprefixrBrowsers, 
      cascade: false 
     })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(destination)) 
    .pipe(cssnano()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(gulp.dest(destination)); 
}); 

그러나, 나는 다음과 같은 오류가 발생합니다 : :

stream.js:74 
    throw er; // Unhandled stream error in pipe. 

Answer 1

그것은 문제를 일으키는 sourcemap 파일의

나는 파일에서 다음 작업을해야합니다.

sourcemaps.write('.')을 실행하면 .map 파일을 스트림으로 내 보냅니다. 즉, 스트림에 두 개의 파일, 즉 CSS 파일과 원본 맵 파일이 있음을 의미합니다.

CSS 파일이 cssnano()에 도달하면 크기가 줄어 듭니다. 그러나 소스 맵 파일이 cssnano()에 도달하면 오류가 발생합니다. cssnano()은 파일을 CSS로 구문 분석하려고하지만 소스 맵 파일은 유효한 CSS 파일이 아니므로 실패하고 cssnano()이 발생합니다.

gulp.dest()으로 디스크에 저장 한 후 원본 스트림 파일을 스트림에서 제거해야합니다. 당신은이에 대한 gulp-filter 플러그인을 사용할 수 있습니다 : 위의 filter('**/*.css')에서

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

gulp.task('sass', function() { 
    return gulp.src('./src/sass/zebra.scss') 

    .pipe(sourcemaps.init()) 
     .pipe(sass().on('error', sass.logError)) 
     .pipe(autoprefixer({ 
      browsers: autoprefixrBrowsers, 
      cascade: false 
     })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(destination)) 
    .pipe(filter('**/*.css')) 
    .pipe(cssnano()) 
    .pipe(rename({ 
     suffix: '.min' 
    })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest(destination)); 
}); 

는 문제가 해결이 아닌 sourcemaps 파일을 통해 CSS 파일을 할 수 있습니다.

축소 및 축소되지 않은 CSS 파일 모두에 대해 원본 맵을 원하기 때문에 끝 부분 바로 이전에 두 번째 sourcemaps.write('.')을 추가했습니다.

Answer 2

파이프 라인 오류로 실행중인, 나는 당신이 wrapPipe과 작업 기능을 포장하고 위의 예처럼 모든 파이프에 .on( 오류 , error) 방법을 넣으면

/** 
* Wrap gulp streams into fail-safe function for better error reporting 
* Usage: 
* gulp.task('less', wrapPipe(function(success, error) { 
* return gulp.src('less/*.less') 
* .pipe(less().on('error', error)) 
* .pipe(autoprefixer().on('error', error)) 
* .pipe(minifyCss().on('error', error)) 
* .pipe(gulp.dest('app/css')); 
* })); 
*/ 
function wrapPipe(taskFn) { 
    return function(done) { 
    var onSuccess = function() { 
     done(); 
    }; 
    var onError = function(err) { 
     done(err); 
    } 
    var outStream = taskFn(onSuccess, onError); 
    if(outStream && typeof outStream.on === 'function') { 
     outStream.on('end', onSuccess); 
    } 
    } 
} 

매우 도움이 될 this를 발견하는 경우 그것은 오류를 잡아 내고 문제 파일을 가리키며 # 일반적으로 줄을 긋습니다. 창자가 필요하지 않습니다.