Gulp con watchify/browserify corre due volte poi si ferma a guardare

Question

Ecco il mio gulpfile.js

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

var paths = { 
    scripts: ['src/jsx/index.jsx'] 
}; 

gulp.task('browserify', function(){ 


    var bundler = watchify(browserify('./src/jsx/index.jsx', watchify.args)); 
    bundler.transform(reactify); 

    bundler.on('update', rebundle); 

    function rebundle() { 
     return bundler.bundle() 
      // log errors if they happen 
      .on('error', gutil.log.bind(gutil, 'Browserify Error')) 
      .pipe(source('bundle.js')) 
      .pipe(gulp.dest('./public/js')); 
    } 

    return rebundle(); 

}); 

gulp.task('watch', function() { 
    gulp.watch(paths.scripts, ['browserify']); 
}); 

Poi la mia uscita di comando è simile al seguente:

$ gulp watch 

[15:10:41] Using gulpfile ~/blizztrack/dashboard/gulpfile.js 
[15:10:41] Starting 'watch'... 
[15:10:41] Finished 'watch' after 9.95 ms 

Salva index.jsx

[15:10:45] Starting 'browserify'... 
[15:10:51] Finished 'browserify' after 5.33 s 

salva index.jsx la seconda volta

[15:11:08] Starting 'browserify'... 
[15:11:10] Finished 'browserify' after 2.02 s 

Salva index.jsx la terza volta

Nessuna uscita.

Questo sembra fare esattamente quello che voglio per le prime due volte, e poi smette di guardare. Qualcuno può indicarmi la giusta direzione?

Answer 1

Ecco come si presenta il mio nuovo file gulp funzionante. Non mi ha dato problemi e realizza la stessa cosa. Abbastanza sicuro @Ben era corretto - gulp.watch e watchify erano in conflitto.

var gulp = require('gulp'); 
var source = require('vinyl-source-stream'); 
var browserify = require('browserify'); 
var watchify = require('watchify'); 
var reactify = require('reactify'); 
var chalk = require('chalk'); 
var gcallback = require('gulp-callback'); 
var moment = require('moment'); 
var gutil = require('gutil'); 

var jsDest = '../../server/webship/html/html/static/js'; 
var viewsDir = './js/views'; 

var watchifyArgs = watchify.args; 
watchifyArgs.debug = true; 

var bundler = watchify(browserify('./js/views/main.jsx', watchifyArgs)); 
// add any other browserify options or transforms here 
bundler.transform(reactify); 

bundler.on('time', function (time) { 
    var durationOfBundleBuild = moment.duration(time).asSeconds(); 
    console.log(chalk.green('Updated'), ' bundle in ', chalk.bold(durationOfBundleBuild + 's'), '\n'); 
}); 

gulp.task('watch', function() { 

    bundle(true); 

    bundler.on('update', function() { 
     console.log('updating...'); 
     bundle(true); 
    }); 
}); 

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

function bundle(watching) { 

    console.log(chalk.yellow('Updating') + ' bundle...'); 

    bundler.bundle() 
     .on('error', gutil.log.bind(gutil, 'Browserify Error')) 
     .pipe(source('bundle.js')) 
     .pipe(gulp.dest(jsDest)) 
     .pipe(gcallback(function() { 

      if (!watching) { 
       process.nextTick(function() { 
        process.exit(0); 
       }); 
      } 
     })); 
} 

Answer 2

Penso che watchify e gulp.watch siano probabilmente in conflitto quando entrambi provano a ricostruire il pacchetto. Vorrei rimuovere l'attività watch e utilizzare direttamente l'attività browserify.

Answer 3

Non è stato neanche per me quando ho usato per la prima volta watchify per accelerare il tempo di compilazione del browser js. Quando si utilizza watchify gulp.watch non è più necessario. Per vedere la compilazione/costruire tempo nella finestra di output/attività che è possibile eseguire le seguenti operazioni (si noti il ​​comando gutil.log):

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

    var bundler = watchify(browserify('./src/app.js', watchify.args)); 
    gulp.task('browserify', bundle); 

    bundler.on('update', bundle); 

    function bundle() { 
     var start = new Date().getTime(); 

     var b = bundler.bundle() 
      .on('error', gutil.log.bind(gutil, 'Browserify Error')) 
      .pipe(source('bundle.js')) 
      .pipe(buffer()) 
      .pipe(gulp.dest('./src/dist')); 

     var end = new Date().getTime(); 
     var time = end - start; 

     gutil.log('[browserify]', 'rebundle took ', gutil.colors.cyan(time + ' ms')); 
     return b; 
    } 

vedere se questo aiuta.

Answer 4

Ho appena scoperto questo problema. Dopo aver consultato il web per le risposte per un paio d'ore, ho provato a modificare il file in Blocco note anziché IDE PHPStorm. Si è scoperto che browserify/watchify continuava a funzionare tramite il blocco note.

Questo è quando ho provato a giocare con alcune impostazioni. Si è scoperto PHPStorm/Impostazioni di sistema/Usa "scrittura sicura", se abilitato, interrompe il controllo dopo che PHPStorm ha modificato il file.

Tutti i problemi sono scomparsi magicamente quando ho disattivato la "scrittura sicura". Non sono sicuro di quale ID si sta utilizzando, ma forse esiste anche un'opzione "Scrittura sicura".

Answer 5

Se si sta utilizzando vim ed eseguire a questo problema, e sono non utilizzando sia watchify e gulp.watch, prova a fare :set noswapfile, o l'aggiunta di set noswapfile nel vostro .vimrc.

Credo che questa correzione funzioni perché lo schema di vim di creare e modificare un file .swp mentre si lavora e quindi sostituire il file con il file di scambio quando si salva effettivamente interferisce con la capacità di watchify di ricevere eventi del file system.

Nota che :set noswapfile significa le modifiche sono non salvato su disco fino a quando effettivamente fare :w!