使用watchify/browserify的Gulp运行两次后就停止了监听。

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文件

没有输出。

前两次它似乎正好做了我想要的事情，但是它在第三次时停止了监视。有没有人能指点一下我？

- thealexbaron

---

你在第二次和第三次保存之间实际上改变了文件的内容吗？ - thataustin

@thataustin，是的，我是。 - thealexbaron

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - thataustin

@thataustin，那个模块已被列入黑名单。https://github.com/deepak1556/gulp-browserify/issues/64 - thealexbaron

我对 watchify 的理解是它可以为你处理增量的 browserify 构建。因此，如果你正在使用 watchify，就不需要使用 gulp.watch。我怀疑这两者在某种程度上存在冲突。 - Ben

Answer 1

我最近遇到了这个问题。在浏览网络寻找答案几个小时后，我尝试在Notepad而不是PHPStorm IDE中编辑文件。结果发现browserify/watchify仍然能够通过notepad工作。

于是我开始试着调整一些设置。结果发现PHPStorm / 系统设置 / 使用“安全写入”选项，如果启用，将会在PHPStorm编辑文件后停止watchify的工作。

当我关闭“安全写入”选项时，所有的问题都神奇地消失了。我不知道你在使用哪种IDE，但也许有一个 “安全写入” 选项。

- Jeremy

---

非常感谢分享！我都快被这个问题搞疯了 :D - Alexandre Martini

我无法赞同这个足够的程度，我经历了许多不同的Browserify设置，阅读并反复阅读我传递的所有选项，这让我疯狂。 - CoolGoose

Answer 2

当我第一次使用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;
    }

看看这是否有帮助。

- mike123

---

可以将gulp-duration视为一种速记方式。 - backdesk

Answer 3

这是我的新的工作流 gulp 文件，看起来像这样。没有出现任何问题并完成了同样的任务。我相信 @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);
                });
            }
        }));
}

- thealexbaron

Answer 4

我认为当watchify和gulp.watch同时尝试重建您的捆绑包时，它们可能会发生冲突。我建议删除watch任务，直接使用browserify任务。

- Ben

Answer 5

如果你正在使用vim并遇到此问题，并且不同时使用watchify和gulp.watch，请尝试执行:set noswapfile或在你的.vimrc中添加set noswapfile。

我相信这个修复方法有效是因为vim创建和编辑.swp文件的方式会干扰watchify接收文件系统事件的能力。

请注意，:set noswapfile意味着你的编辑内容直到你执行:w才会保存到磁盘上！

- kellen