2015-07-29 14 views
5

Vorrei configurare gulp per poter fare due cose: 1) usare watchify per monitorare gli aggiornamenti nei file e ricostruire automaticamente usando browserify sulle modifiche, e 2) fare un annuncio -h costruire una volta e uscire.Gulp non esce con watchify, browserify

# 1 sembra funzionare bene, ma ho problemi a ottenere # 2 per funzionare. Digito gulp build nel terminale e tutto è impacchettato bene, ma il gulp non esce o non esce; rimane solo lì e non sono riportato alla riga di comando.

Cosa sto sbagliando? Ecco l'intero gulpfile:

'use strict'; 

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var watchify = require('watchify'); 
var source = require('vinyl-source-stream'); 
var gutil = require('gulp-util'); 

var b = watchify(browserify({ 
    cache: {}, 
    packageCache: {}, 
    entries: ['./app/app.js'], 
    debug: true, 
    transform: ['reactify'] 
})); 

b.on('log', gutil.log); 

var bundle = function() { 
    return b.bundle() 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./dist')); 
}; 

gulp.task('watch', function() { 
    b.on('update', bundle); 
}); 

gulp.task('build', function() { 
    bundle(); 
}); 

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

Ed ecco l'output nel mio terminale:

[11:14:42] Using gulpfile ~/Web Dev/event-calendar/gulpfile.js 
[11:14:42] Starting 'build'... 
[11:14:42] Finished 'build' after 4.28 ms 
[11:14:45] 1657755 bytes written (2.99 seconds) 

Gulp è ancora in esecuzione dopo il log in 11:14:45 e non salta di nuovo fuori al terminale .

+0

non direttamente collegate alla domanda, ma è possibile utilizzare https://github.com/ngryman/gulp-bro che richiede molto meno boilerplate con le stesse prestazioni di watchify. – ngryman

risposta

6

.bundle() non deve essere chiamato sull'involucro di watchify. Il seguente tutto fisso:

'use strict'; 

var gulp = require('gulp'); 
var browserify = require('browserify'); 
var watchify = require('watchify'); 
var source = require('vinyl-source-stream'); 
var gutil = require('gulp-util'); 

var b = function() { 
    return browserify({ 
    cache: {}, 
    packageCache: {}, 
    entries: ['./app/app.js'], 
    debug: true, 
    transform: ['reactify'] 
    }); 
}; 

var w = watchify(b()); 

w.on('log', gutil.log); 

var bundle = function(pkg) { 
    return pkg.bundle() 
    .pipe(source('bundle.js')) 
    .pipe(gulp.dest('./dist')); 
}; 

gulp.task('watch', function() { 
    bundle(w); 
    w.on('update', bundle.bind(null, w)); 
}); 

gulp.task('build', bundle.bind(null, b())); 

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

ma tu chiami .bundle su watchify con questa soluzione con bundle (w), qual è la differenza? –

+0

@ TamásKüzdi la differenza è che nel task 'build' di questa versione, non chiama .bundle su watchify. Nota nell'OP che non ci sono 'w' separati (watchify bundler) e' b' (browserify bundler). – plong0

Problemi correlati