每个文件分别触发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' }

问题是，手表是分别为每个文件触发的。这很烦人，因为根据窗户的高度，棉绒警告可能会滚出视线。我该如何解决这个问题？

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
}