咕嘟咕嘟与watchify/browserify运行两次，然后停止看

Question

这里是我的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']); 
}); 

然后我的命令行输出如下：

$ 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 

保存index.jsx

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

保存index.jsx第二次

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

保存index.jsx第三次

无输出。

这似乎是做了我想要的前两次，然后它只是停止观看。任何人都可以将我指向正确的方向吗？

Answer 1

这是我的新工作吞噬文件的样子。没有给我任何问题，并完成同样的事情。很确定@Ben是正确的 - gulp.watch和watchify有冲突。

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

我认为watchify和gulp.watch可能是冲突，当他们都试图重建你的包。我将删除watch任务，并直接使用browserify任务。

Answer 3

当我第一次使用watchify加快browserify js编译时间时，对我来说这并不明显。当使用watchify gulp.watch不再需要。要查看编​​译/输出/任务窗口中，你可以做以下的建造时间（注意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; 
    } 

看看是否有帮助。

Answer 4

刚刚遇到此问题。在浏览网页找到答案几个小时后，我尝试在记事本中而不是PHPStorm IDE中编辑文件。事实证明，browserify/watchify继续通过记事本工作。

那是当我试图玩弄一些设置。原来PHPStorm /系统设置/使用“安全写入”（如果启用），在PHPStorm编辑文件后停止监视。

当我关闭“安全写入”时，所有问题都神奇地消失了。我不确定你使用的是什么IDE，但也许有一个“安全写入”选项。

Answer 5

如果您同时使用watchify和gulp.watch使用vim，并运行到这个问题，并没有，尝试做:set noswapfile，或在您的.vimrc加入set noswapfile。

我相信这个修补程序的工作原理是因为vim的工作方式是在工作时创建和编辑.swp文件，然后在实际保存时用交换文件替换文件会干扰watchify接收文件系统事件的能力。

请注意，:set noswapfile表示您的编辑是而不是保存到磁盘，直到您实际上做:w！