[英]GULP: Modify a watched file in place without causing an infinite loop
Im trying to use gulp and jscs to prevent code smell. 我试图使用gulp和jscs来防止代码味道。 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.
我遇到的问题是jscs是修改正在观看的源文件。 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 ...
这导致gulp进入无限循环的jscs修改文件,然后观察看到变化并一次又一次地关闭jscs ......
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']);
});
It's generally a bad idea to override source files from a gulp task. 从gulp任务覆盖源文件通常是个坏主意。 Any Editors/IDEs where those files are open might or might not handle that gracefully.
任何打开这些文件的编辑器/ IDE可能会也可能不会正常处理这些文件。 It's generally better to write the files into a separate
dist
folder. 将文件写入单独的
dist
文件夹通常更好。
That being said here's two possible solutions: 这就是说这里有两个可能的解决方案:
Solution 1 解决方案1
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. 您需要停止
gulp-jscs
插件再次运行并再次写入文件,从而防止您遇到的无限循环。 To achieve this all you have to do is add gulp-cached
to your lint
task: 要实现这一点,您只需将
gulp-cached
添加到lint
任务:
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'));
});
The first cache()
makes sure that only files on disk that have changed since the last invocation of lint
are passed through. 第一个
cache()
确保只传递自上次调用lint
以来已更改的磁盘上的文件。 The second cache()
makes sure that only files that have actually been fixed by jscs()
are written to disk in the first place. 第二个
cache()
确保只有jscs()
实际修复过的文件才会首先写入磁盘。
The downside of this solution is that the lint
task is still being executed twice. 此解决方案的缺点是
lint
任务仍在执行两次。 This isn't a big deal since during the second run the files aren't actually being linted. 这不是什么大问题,因为在第二次运行期间文件实际上并没有被linted。
gulp-cache
prevents that from happening. gulp-cache
可以防止这种情况发生。 But if you absolutely want to make sure that lint
is run only once there's another way. 但是如果你绝对想要确保
lint
只运行一次,那就是另一种方式。
Solution 2 解决方案2
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
). 首先你应该使用
gulp.watch()
gulp-watch
插件而不是内置的gulp.watch()
(这是因为它使用了优秀的chokidar
库而不是gaze
)。
Then you can write yourself a simple pausableWatch()
function and use that in your watch
task: 然后你可以自己写一个简单的
pausableWatch()
函数并在你的watch
任务中使用它:
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']);
});
In the above the watcher
is stopped before the lint
task starts. 在上面,
watcher
在lint
任务开始之前停止。 Any .js
files written during the lint
task will therefore not trigger the watcher
. 因此,在
lint
任务期间写入的任何.js
文件都不会触发watcher
。 After the lint
task has finished, the watcher
is started up again. 在
lint
任务完成后, watcher
再次启动。
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). 此解决方案的缺点是,如果在执行
lint
任务时保存.js
文件,则watcher
将不会选择更改(因为它已被停止)。 You have to save the .js
file after the lint
task has finished (when the watcher
has been started again). 在
lint
任务完成后(当再次启动watcher
时),您必须保存.js
文件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.