Gulp 监视检测到的更改,但输出不';不变
我有以下Gulp 监视检测到的更改,但输出不';不变,gulp,browserify,babeljs,watchify,Gulp,Browserify,Babeljs,Watchify,我有以下gulpfile gulp.task('browserify', function() { bundle(false); }); gulp.task('browserify-watch', function() { bundle(true); }); function bundle (performWatch) { var bify = (performWatch === true ? watchify(browserify(finalBrow
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);
}
问题是,gulpbrowserify
工作正常。但是,gulp browserify watch
检测到更改,但输出从未更新
我做错了什么?看起来一切都很好,我的IDE Webstorm正在缓存文件。当我看到盒子上的实际文件时,一切正常 我在文件更改检测中遇到了相同的失败(gulp和grunt)。但CLI watchify的工作原理与预期相同。例如:
watchify ./src/app.js -t babelify --outfile ./build/bundle.js -v
现在我换了。就watchify方法而言,视角是不同的。以下是他们的Github页面中的一段内容,这段内容通过得最好:
browserify incremental可以检测其间发生的更改
运行,这意味着它可以作为构建系统的一部分使用
按需调用,无需长期流程。鉴于
每次启动时,watchify的第一次运行速度都很慢,
每次在第一次之后,browserify增量都很快
下面是使用browserify incremental的“translated”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']);