GULP:就地修改监视文件而不会导致无限循环 [英] GULP: Modify a watched file in place without causing an infinite loop

问题描述

我正在尝试使用 gulp 和 jscs 来防止代码异味.我还想使用 watch 以便在进行更改时发生这种情况.我遇到的问题是 jscs 是修改正在监视的源文件.这会导致 gulp 进入 jscs 修改文件的无限循环，然后观看更改并一次又一次地触发 jscs ...

Im trying to use gulp and jscs to prevent code smell. I also want to use watch so that this happens when ever a change is made. The problem I'm running into is jscs is modify the source file that is being watched. This causes gulp to go into an infinite loop of jscs modifying the file and then watch seeing the change and firing off jscs again and again and again ...

const gulp = require('gulp');

gulp.task('lint', function() {
    return gulp.src('/src/**/*.js')
        .pipe(jscs({
            fix: true
        }))
        .pipe(jscs.reporter())
        .pipe(gulp.dest('/src'));
});

gulp.task('watch', function() {
    gulp.watch('/src/**/*.js', ['lint']);
});

推荐答案

从 gulp 任务中覆盖源文件通常是个坏主意.任何打开这些文件的编辑器/IDE 可能会或可能不会优雅地处理它.通常最好将文件写入单独的 dist 文件夹.

It's generally a bad idea to override source files from a gulp task. Any Editors/IDEs where those files are open might or might not handle that gracefully. It's generally better to write the files into a separate dist folder.

话虽如此，这里有两种可能的解决方案:

That being said here's two possible solutions:

解决方案 1

您需要停止 gulp-jscs 插件再次运行并再次写入文件，从而防止您遇到无限循环.要实现这一点，您只需添加 gulp-cached 到你的 lint 任务:

You need to stop the gulp-jscs plugin from running a second time and writing the files again, thus preventing the infinite loop you're running into. To achieve this all you have to do is add gulp-cached to your lint task:

var cache = require('gulp-cached');

gulp.task('lint', function() {
  return gulp.src('/src/**/*.js')
    .pipe(cache('lint'))
    .pipe(jscs({
        fix: true
    }))
    .pipe(cache('lint'))
    .pipe(jscs.reporter())
    .pipe(gulp.dest('/src'));
});

第一个 cache() 确保只有磁盘上自上次调用 lint 后发生更改的文件才能通过.第二个 cache() 确保只有真正被 jscs() 修复的文件首先被写入磁盘.

The first cache() makes sure that only files on disk that have changed since the last invocation of lint are passed through. The second cache() makes sure that only files that have actually been fixed by jscs() are written to disk in the first place.

这个解决方案的缺点是 lint 任务仍然被执行了两次.这没什么大不了的，因为在第二次运行期间文件实际上并没有被 linted.gulp-cache 可以防止这种情况发生.但是如果你绝对想确保 lint 只运行一次，还有另一种方法.

The downside of this solution is that the lint task is still being executed twice. This isn't a big deal since during the second run the files aren't actually being linted. gulp-cache prevents that from happening. But if you absolutely want to make sure that lint is run only once there's another way.

解决方案 2

首先你应该使用 gulp-watch 插件而不是内置的 gulp.watch() (那是因为它使用了上级 chokidar 库而不是 gaze).

First you should use the gulp-watch plugin instead of the built-in gulp.watch() (that's because it uses the superior chokidar library instead of gaze).

然后你可以自己编写一个简单的 pausableWatch() 函数并在你的 watch 任务中使用它:

Then you can write yourself a simple pausableWatch() function and use that in your watch task:

var watch = require('gulp-watch');

function pausableWatch(watchedFiles, tasks) {
  var watcher = watch(watchedFiles, function() {
    watcher.close();
    gulp.start(tasks, function() {
      pausableWatch(watchedFiles, tasks);
    });
  });
}

gulp.task('watch', function() {
  pausableWatch('/src/**/*.js', ['lint']);
});

在上面的 watcher 在 lint 任务开始之前停止.因此，在 lint 任务期间编写的任何 .js 文件都不会触发 watcher.lint 任务完成后，再次启动watcher.

In the above the watcher is stopped before the lint task starts. Any .js files written during the lint task will therefore not trigger the watcher. After the lint task has finished, the watcher is started up again.

此解决方案的缺点是，如果您在执行 lint 任务时保存 .js 文件，则 不会获取更改watcher (因为它已经停止了).您必须在 lint 任务完成后(再次启动 watcher 时)保存 .js 文件.

The downside of this solution is that if you save a .js file while the lint task is being executed that change will not be picked up by the watcher (since it has been stopped). You have to save the .js file after the lint task has finished (when the watcher has been started again).

这篇关于GULP:就地修改监视文件而不会导致无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！