Gulp配管工またはPrettyErrorがループで動作しない

Question

エラー後に破損するgulp watchに問題があります。その後、私は良いreference配管工を使用し、それの延長、gulp-prettyerrorを見つけた。

それから私はprettyErrorが本当にうまく動作します。このgulpfile.js

const gulp   = require('gulp'), 
     babel   = require('gulp-babel') 
     changed  = require('gulp-changed'), 
     prettyError = require('gulp-prettyerror'); 


////////////////////////// START SQUAREBOOK //////////////////////////////// 
const reactSquarebookSource = './common/modules/squarebook/web/jsx/*.{js,jsx}'; 
const reactSquarebookDest  = './common/modules/squarebook/web/js'; 

// run babel on squarebook 
gulp.task('babel:squarebook', function() { 
    return gulp.src(reactSquarebookSource) 
    .pipe(prettyError()) 
    .pipe(changed(reactSquarebookDest)) // make sure only changed source 
    .pipe(babel()) // do the babel 
    .pipe(gulp.dest(reactSquarebookDest)); 
}); 

gulp.task('watch:squarebook', function() { 
    gulp.watch(reactSquarebookSource, ['babel:squarebook']); 
}); 
////////////////////////// FINISH SQUAREBOOK /////////////////////////////// 


///////////////////////// START FRONTEND /////////////////////////////////// 
const reactFrontendSource = './frontend/web/jsx/*.{js,jsx}'; 
const reactFrontendDest  = './frontend/web/js'; 

// run babel on frontend 
gulp.task('babel:frontend', function() { 
    return gulp.src(reactFrontendSource) 
    .pipe(prettyError()) 
    .pipe(changed(reactFrontendDest)) // make sure only changed source 
    .pipe(babel()) // do the babel 
    .pipe(gulp.dest(reactFrontendDest)); 
}); 

gulp.task('watch:frontend', function() { 
    gulp.watch(reactFrontendSource, ['babel:frontend']); 
}); 
///////////////////////// FINISH FRONTEND ////////////////////////////////// 

// all babel react 
gulp.task('babel', [ 
    'babel:squarebook', 
    'babel:frontend' 
]) 

// all watchers 
gulp.task('watch', [ 
    'watch:squarebook', 
    'watch:frontend' 
]); 

gulp.task('default', [ 
    'babel', 
    'watch' 
]); 

を作成します。私はすきです。しかし、このコードはかなり冗長です。私はまだモジュールを作成する必要があり、モジュールを作成するたびにコピー・ペーストを行います。今私は'./common/modules/squarebook/web/jsx/*.{js,jsx}'上のエラーを作成しようとしましたことを、エラーが表示されていない

// require all the libraries 
const gulp   = require('gulp'), 
     babel   = require('gulp-babel') 
     changed  = require('gulp-changed'), 
     prettyError = require('gulp-prettyerror'); 

// react source map 
const moduleSources = { 
    squarebook: { 
    src : './common/modules/squarebook/web/jsx/*.{js,jsx}', 
    dest : './common/modules/squarebook/web/js' 
    }, 
    frontend: { 
    src : './frontend/web/jsx/*.{js,jsx}', 
    dest : './frontend/web/js' 
    } 
} 

gulp.task('babel', function() { 
    for(var moduleName in moduleSources) { 
    var sourceMap = moduleSources[moduleName]; 
    var taskName = 'babel:' + moduleName; 

    // create the task 
    gulp.task(taskName, function() { 
     return gulp.src(sourceMap.src) 
     .pipe(changed(sourceMap.dest)) // make sure only changed source 
     .pipe(prettyError()) 
     .pipe(babel()) // do the babel 
     .pipe(gulp.dest(sourceMap.dest)); 
    }); 
    // do the watcher 
    gulp.watch(sourceMap.src, [taskName]); 
    } 
}); 

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

：だから私はそれをリファクタリングすることを決めました。 prettyErrorは最後のループでのみエラーを表示するようです。ウォッチャーは壊れていませんが、エラーは表示されません。なぜこれが起こっているのか？

ループでエラーが発生しているかどうかは疑問です。

Answer 1

問題は、ループの最後まで更新される無名関数内でsourceMapを使用することです。だから、私の解決策は次のようになります。それは、参照によって更新されないように

// require all the libraries 
const gulp   = require('gulp'), 
     babel   = require('gulp-babel') 
     changed  = require('gulp-changed'), 
     prettyError = require('gulp-prettyerror'); 

// react source map 
const moduleSources = { 
    squarebook: { 
    src : './common/modules/squarebook/web/jsx/*.{js,jsx}', 
    dest : './common/modules/squarebook/web/js' 
    }, 
    frontend: { 
    src : './frontend/web/jsx/*.{js,jsx}', 
    dest : './frontend/web/js' 
    } 
} 

// http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example 
// create function to ensure the right closure 
function processBabel(src, dest) { 
    console.log(src); 
    return gulp.src(src) 
    .pipe(changed(dest)) // make sure only changed source 
    .pipe(prettyError()) 
    .pipe(babel()) // do the babel 
    .pipe(gulp.dest(dest)); 
} 

var babelTasks = []; 
gulp.task('babel', function() { 
    for(var moduleName in moduleSources) { 
    var sourceMap = moduleSources[moduleName]; 
    var taskName = 'babel:' + moduleName; 

    // create the task 
    gulp.task(taskName, processBabel.bind(this, sourceMap.src, sourceMap.dest)); 

    // do the watcher 
    gulp.watch(sourceMap.src, [taskName]); 
    } 
}); 


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

。したがって、私は、srcとdestを処理するための他の関数を作成します。