javascript - 为每个文件分别触发 Gulp 监视

Question

我认为我需要对我的 gulp 文件进行全面改进。但目前最困扰我的是 gulp watch 的行为。我使用 gulp-watch 重新加载 gulp-connect 以更新 chrome。问题是，它是为每个文件单独触发的。

这是我的 gulp 文件的摘录：

gulp.task('copySources', function() {
    gulp.src('src/*.html')
        .pipe(gulp.dest('dist'));
    gulp.src('src/css/*css')
        .pipe(gulp.dest('dist/css'));
    gulp.src('src/images/**')
        .pipe(gulp.dest('dist/images'));
    gulp.src('src/api/**')
        .pipe(gulp.dest('dist/api'));
});

gulp.task('webserver', function() {
    connect.server({
        livereload: true,
        root: ['dist']
    });
});

gulp.task('livereload', function() {
    gulp.src('dist/**')
        .pipe(connect.reload());
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('src/js/*.js', ['lint', 'scripts']);
    gulp.watch('src/*.html', ['copySources']);
    gulp.watch('src/css/*.css', ['copySources']);
    gulp.watch('src/images/**', ['copySources']);
    gulp.watch('src/api/**', ['copySources']);
    gulp.watch('dist/**', {verbose: true}, function(files) {
        console.log(files);
    });
    gulp.watch('libs/**', ['copyLibs']);
});

我将最后一个手表从['livereload']打印文件路径的功能更改为调试目的。（详细设置似乎没有任何效果。）运行 gulp 的输出如下所示：

{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\index.html' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\css\\bootstrap.min.css' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\css\\style.css' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\api\\recipe.json' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Chocolate_Cake.png' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Mint_Tea.png' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\all.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\Penne_Pasta.jpg' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\images\\cc_logo.svg' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\all.min.js' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular-resource.min.js.map' }
{ type: 'changed',
  path: 'd:\\GitHub\\Meadule\\dist\\js\\angular.min.js.map' }

问题是，手表是为每个文件单独触发的。这很烦人，因为 lint 警告可能会滚动到视野之外，具体取决于窗口的高度。我该如何解决这个问题？

Answer 1

问题是每当单个文件更改时，您都将每个源文件复制到 dist 目录。如果您使用gulp-changed或gulp-newer，则只会复制更改/更新的文件并触发监视。

Answer 2

我还可以建议gulp-newy在其中您可以在自己的函数中操作路径和文件名。然后，只需将该函数用作newy(). 这使您可以完全控制要比较的文件。

newy(function(projectDir, srcFile, absSrcFile) {
  // do whatever you want to here. 
  // construct your absolute path, change filename suffix, etc. 
  // then return /foo/bar/filename.suffix as the file to compare against
}