咕嘟咕嘟與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！