2015-05-20 10 views
7

Oluşturma işlemimize watchify ekliyorum ancak koşmayı izlemek için bir önkoşul koymak istiyorum ve bu değişmiş olan dosya (lar) linting adımımızı (ESLint kullanıyor) iletiyor.Çalıştırılmadan önce çalıştır eslint Çalıştır

function runBrowserify(watch){ 
    var babel = babelify.configure({ 
     optional: ['es7.objectRestSpread'] 
    }); 
    var b = browserify({ 
    entries: './app/main.js', 
    debug: true, 
    extensions: ['.jsx', '.js'], 
    cache: {}, 
    packageCache: {}, 
    fullPaths: true 
    }) 
    .transform(babel); 

    if(watch) { 
    // if watch is enable, wrap this bundle inside watchify 
    b = watchify(b); 
    b.on('update', function(ids) { 
     //run the linting step 
     lint(ids); 

     //run the watchify bundle step 
     gutil.log(gutil.colors.blue('watchify'), 'Started'); 
     bundleShare(b); 
    }); 
    b.on('time', function (time) { 
     gutil.log(gutil.colors.blue('watchify'), 'Finished', 'after', gutil.colors.magenta(time), gutil.colors.magenta('ms')); 
    }); 
    } 

    bundleShare(b); 
} 

function bundleShare(b) { 
    b.bundle() 
    .pipe(source('main.min.js')) 
    .pipe(gulp.dest('./dist')); 
} 

function lint(glob) { 
    return gulp.src(glob) 
    .pipe(eslint()) 
    .pipe(eslint.format()) 
    .pipe(eslint.failOnError()); 
} 

sorun donatılacak bitmiş olacaktır önce bitiş değil bu yüzden tüylenme adım zaman uyumsuz olduğunu (o da atar bu yüzden muhtemelen plumber kullanmak gerekir:

Bunu yapmanın düşünüyordum watch adımını sonlandırmaktan durdurmak için).

bundleShared'u aramadan önce nasıl bir ön koşul yapabilirim?

+0

Bunu anladınız mı? – Loknar

+0

nope. Ben yan yana çalışan onlar için yerleşmek zorundayım, bu yüzden bazen ESLint hatalarını özledim –

+1

Belki bu bir watchify.on ('update', func) için bir kapatma geçirerek yapılabilir eğer merak ediyorum? https://github.com/substack/watchify Bazen bir kez deneyeceğim ve –

cevap

2

Yukarıda bahsettiğim kapatma yöntemini kullanarak bunu yapabiliyordum. Ayrıca, Browserify ve Watchify kodumu her bir yapının yararlanabileceği yardımcı işlevlere taşıdım.

benim test için
gulp.task('build:dev', buildDev); 
gulp.task('lint:js', lintJS); 

function lintJS(callback) { 
    return gulp.src(['src/**/*.js', 'src/**/*.jsx', '!src/js/vendor/**/*.*',]) 
     .pipe(eslint()) 
     .pipe(eslint.format()) 
     .pipe(eslint.failAfterError()); 
} 

function buildDev(callback) { 
    var bundler = getBundler('src/js/app.jsx', { debug: true }, callback); 
    var watcher = getWatcher(bundler, rebundle); 

    function rebundle() { 
    lintJS(callback); 

    return watcher.bundle() 
     .pipe(source('bundle.min.js')) 
     .pipe(buffer()) 
     .pipe(gulp.dest('dist/js')); 
    } 

    rebundle(); 
    // Call watch methods here, i.e.: watchHTML() 
    return callback(); 
} 

/****************************** Helper functions ******************************/ 

/** 
* Gets the default Browserify bundler used by all builds. 
* 
* 
* @param path A string representing where Browserify should start from 
* @param options An Object containing options for the bundler 
* @param callback The Gulp callback function from the calling task 
* @return A basically configured Browserify bundler 
*/ 
function getBundler(path, options, callback) { 
    var bundler = browserify(path, { debug: options.debug, cache: {}, packageCache: {} }); 
    bundler.transform(babelify); 
    bundler.on('log', gutil.log); 
    bundler.on('error', gutil.log.bind(gutil.colors.red, 'Browserify Error')); 

    return bundler; 
} 

/** 
* Gets the default Watchify watcher used by dev builds. By default, the watcher 
* will rebundle the Browserify package when an update occurs. 
* 
* @param bundle The Browserify bundler object 
* @param rebundle A function to perform when Watchify detects a code update 
* @return A basically configured Watchify watcher 
*/ 
function getWatcher(bundle, rebundle) { 
    var watcher = watchify(bundle); 
    watcher.on('update', rebundle); 

    return watcher; 
} 

ve eşya I (yöntemi) (hayır rebundle var dolayısıyla ve) Watchify kullanmayın, inşa yüzden 'tiftiği tutmak

gulpfile.js (kısmi): js 'bağımlılık olarak görev:

gulp.task('build:test', ['lint:js'], buildTest); 
gulp.task('build:prod', ['lint:js'], buildProd); 
+0

'u bilmenizi sağlayın Bunun için teşekkürler! Watch özelliği ile birlikte bir live reload sunucusunu çalıştırmak istersek, bu yapılandırmada nereye giderdi? –

+0

"buildDev" içinde "rebundle()" çağrısından hemen sonra. Yapmak istediğiniz şey 'dist /' klasörünüzde bir saat görevi oluşturmaktır. Bu şekilde dist/'değiştiğinde, saat göreviniz onu algılar ve sunucu yeniden yükleme kodunu çalıştırır. Kodu nereye gittiğini gösteren bir yorum ile güncelledim. –

+0

Yup, şu anki saatim görev zaten 'dist' izler :) Açıklama için teşekkürler! Çözümünüzü beğendim, ancak Watchify'ı bir işlevi çağırmak yerine bir görevi çalıştırmayı tercih etmeme rağmen, bağımlılıkların ve tümünün hala burada (ve lintJS ile yaptığınız gibi) arama yöntemleri yerine Gulp ile yönetilebilmesini sağlayın: | –