gruntjs - gulp watch 和 browserify。观看但不会再次构建

Question

所以今天是我玩 gulp 和 grunt 或任何 js 任务运行器的第一天。我到了一个地方，我可以在我的 js 文件中更改我的代码，然后运行

gulp browserify 

这工作正常。但是这很烦人，我想为此添加一个监视，以便当我对脚本进行任何更改时，它会自动运行 gulp browserify 或其他东西，而我不必手动执行此操作。所以这就是我对 gulp.js 所做的

    var gulp = require('./gulp')({


});



gulp.task('watch', function() {
    // Watch .js files
    gulp.watch('jsfolder/**/*.js', ['scripts']);

});
gulp.task('release', ['build']);
gulp.task('build', ['scripts', 'browserify']);
gulp.task('default', ['watch']);

所以当我这样做时

gulp watch

当我保存更改时，它会给我

14:37:21] Starting 'clean'...
[14:37:21] Finished 'clean' after 3.18 ms
[14:37:21] Starting 'concat'...
[14:37:21] Finished 'concat' after 263 μs
[14:37:21] Starting 'checksum'...
[14:37:21] Finished 'checksum' after 19 ms
[14:37:21] Starting 'scripts'...
[14:37:21] Finished 'scripts' after 455 μs
[14:38:41] Starting 'clean'...
[14:38:41] Finished 'clean' after 2.9 ms
[14:38:41] Starting 'concat'...
[14:38:41] Finished 'concat' after 218 μs
[14:38:41] Starting 'checksum'...
[14:38:41] Finished 'checksum' after 18 ms
[14:38:41] Starting 'scripts'...
[14:38:41] Finished 'scripts' after 302 μs

但我的更改从未显示在页面上。我假设它只是观看而不是构建？我错过了什么？

编辑

我加了这个

 gulp.watch('ui.id.go.com/public/**/*.js', ['scripts','browserify']);

但现在它经常检查它，即使更新，我的机器 CPU 也提高了!!有什么更好的想法吗？

谢谢

Answer 1

您应该使用 Watchify与 Browserify以较低的性能成本观察文件更改。当您的应用程序开始扩展时，您的代码库将花费大量时间来打包，因为 Browserify 会重建每个文件，即使在最新的修改中只有一个文件发生了变化。

Watchify 只重建它需要的东西。初始构建(当您运行 gulp 任务时)与以前相同，但在每次更改时，您都会看到不同之处。

在 5578610 字节 JavaScript 应用程序，初始构建需要 6.67s , 并在文件更改时重建 ~400ms .仅使用 Browserify，有 6.67s 在每一个变化。

首先，安装 NPM 包:

npm install browserify watchify --save-dev

在您的 gulpfile.js 中导入 Browserify 和 Watchify :

var browserify = require('browserify');
var watchify = require('watchify');

初始化打包器(我使用 Lodash _ 作为商品)。 client.js是这里的应用程序入口点:

var bundler = watchify(browserify(_.assign(watchify.args, {
  entries: ['./src/client.js'],
  debug: true
})));

bundler.on('log', gutil.log); // Output build logs to terminal using gulp-util.

然后创建您的 bundle()使用 Watchify 的功能:

function bundle() {
  return bundler.bundle()

    // Log errors if they happen.
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('client.js'))

    // Optional, remove if you don't need to buffer file contents.
    .pipe(buffer())

    // Optional, remove if you dont want sourcemaps.
    // Loads map from Browserify file using gulp-sourcemaps.
    .pipe(sourcemaps.init({loadMaps: true}))

    // Add transformation tasks to the pipeline here.
    .pipe(sourcemaps.write('./')) // Writes .map file.
    .pipe(size(config.size)) // Checks output file size with gulp.size.
    .pipe(gulp.dest('./build'));
}

最后，当有依赖更新时运行 bundler:

gulp.task('scripts', bundle);
gulp.task('watch', ['scripts'], function() {
  bundler.on('update', bundle); // On any dependency update, runs the bundler.
});

运行 gulp watch你已经准备好工作了。

注意:您应该只将入口点设置为捆绑器条目。 Browserify 和依赖分支会处理剩下的事情，你不会两次构建同一个文件。