gulp - pass - typescript nodejs

Gulp con watchify/browserify se ejecuta dos veces y luego deja de mirar

Question

Aquí está mi 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'']);
});

Entonces mi salida de línea de comando se ve así:

$ 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

guardar index.jsx

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

guardar index.jsx por segunda vez

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

guardar index.jsx la tercera vez

Ninguna salida.

Esto parece estar haciendo exactamente lo que yo quiero las dos primeras veces, y luego simplemente deja de mirar. ¿Alguien puede señalarme en la dirección correcta?

Answer 1

Creo que watchify y gulp.watch probablemente estén en conflicto cuando ambos intenten reconstruir tu paquete. browserify tarea de watch y simplemente browserify tarea de browserify directa.

Answer 2

Tampoco era obvio para mí cuando usé watchify por primera vez para acelerar el tiempo de compilación de js de navegador. Al usar watchify gulp.watch ya no es necesario. Para ver el tiempo de compilación / compilación en la ventana de salida / tareas, puede hacer lo siguiente (observe el 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;
    }

A ver si eso ayuda.

Answer 3

Solo encontré este problema. Después de buscar en la web respuestas durante un par de horas intenté editar el archivo en el Bloc de notas en lugar de PHPStorm IDE. Resultó que browserify / watchify continuó trabajando a través del bloc de notas.

Eso es cuando intenté jugar con algunas configuraciones. Resultó que PHPStorm / Configuración del sistema / Usar "escritura segura", si está habilitado, deja de mirar después de que PHPStorm edita el archivo.

Todos los problemas desaparecieron mágicamente cuando desactivaba "escritura segura". No estoy seguro de qué IDE está utilizando, pero tal vez también haya una opción de "escritura segura".

Answer 4

Si está utilizando vim y se encuentra con este problema, y no está utilizando tanto watchify como gulp.watch , intente hacerlo :set noswapfile o agregue set noswapfile en su .vimrc .

Creo que esta corrección funciona porque el esquema de vim de crear y editar un archivo .swp mientras trabajas y luego reemplazar el archivo con el archivo de intercambio cuando realmente lo guardas interfiere con la capacidad de watchify para recibir eventos del sistema de archivos.

Tenga en cuenta que :set noswapfile significa que sus ediciones no se guardan en el disco hasta que realmente lo haga :w !

Answer 5

Así es como se ve mi nuevo archivo de trabajo gulp. No me ha dado ningún problema y logra lo mismo. Bastante seguro de que @Ben estaba en lo cierto: gulp.watch y watchify eran contradictorios.

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);
                });
            }
        }));
}