Watchify 检测变化但输出没有变化答案

【问题标题】：Watchify detecting changes but output doesn't changeWatchify 检测变化但输出没有变化
【发布时间】：2015-08-04 00:34:26
【问题描述】：

我有以下gulpfile

gulp.task('browserify', function() {
    bundle(false);
});

gulp.task('browserify-watch', function() {
    bundle(true);
});

function bundle (performWatch) {
    var bify = (performWatch === true
        ? watchify(browserify(finalBrowserifyOptions))
        : browserify(finalBrowserifyOptions));

    if (performWatch) {
        bify.on('update', function () {
            console.log('Updating project files...');
            rebundle(bify);
        });
    }

    bify.transform(babelify.configure({
        compact: false
    }));

    function rebundle(bify) {
        return bify.bundle()
            .on('error', function () {
                plugins.util.log('Browserify error');
            })
            .pipe(source('bundle.js'))
            .pipe(buffer())
            .pipe(plugins.sourcemaps.init({loadMaps: true}))
            .pipe(plugins.sourcemaps.write('./')) 
            .pipe(gulp.dest(paths.build + assets.js));
    }

    return rebundle(bify);
}

问题是gulp browserify 工作得很好。但是，gulp browserify-watch 检测到更改，但输出永远不会更新。

我做错了什么？

【问题讨论】：

标签： gulp browserify babeljs watchify

【解决方案1】：

我在文件更改检测中遇到了相同的watchify 失败（包括 gulp 和 grunt）。 CLI watchify 虽然按预期工作。例如：

watchify ./src/app.js -t babelify --outfile ./build/bundle.js -v

目前我切换到browserify-incremental。关于观察方法的观点是不同的。这是他们的 Github 页面中最能包含它的段落：

browserify-incremental 可以检测两者之间发生的变化运行，这意味着它可以用作构建系统的一部分按需调用，不需要长期的过程。然而 watchify 在每次启动时第一次运行很慢， browserify-incremental 在第一次之后每次都很快。

这是使用 browserify-incremental 的“已翻译”CLI 命令：

browserifyinc ./src/app.js -t babelify --outfile ./build/bundle.js -v

这是一个简单的 gulpfile.js 脚本，用于观看和 [重新] 捆绑：

var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var browserify = require('browserify');
var babel = require('babelify');
var browserifyInc = require('browserify-incremental');

var bundleApp = function() {
  var browserifyObj = browserify('./src/app.js', { debug: false, cache: {}, packageCache: {}, fullPaths: true }).transform(babel);
  var bundler = browserifyInc(browserifyObj,  {cacheFile: './browserify-cache.json'});

  bundler.on('time', function (time) {
    console.log('-> Done in ' + time/1000 + ' ms');
  });

  console.log('-> Bundling...');

  bundler.bundle()
    .on('error', function(err) { console.error(err); this.emit('end'); })
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({ loadMaps: true }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./build'));
};


gulp.task('browserify', function () {
  gulp.watch('./src/**/*.js', function () {
    return bundleApp();
  });
});


gulp.task('default', ['browserify']);

【讨论】：

【解决方案2】：

看起来一切都很好，我的 IDE Webstorm 正在缓存文件。当我查看盒子上的实际文件时，它很好。

【讨论】：