在自動更新/自動生成的文件上使用gulp進行無限監視

Question

我正在嘗試使用一些jscs插件（ jscs ， csscomb ）在開發期間即時設置代碼樣式。

我在gulp進程運行帶有format任務的無限循環時遇到問題。

我相信會發生什么：

• 開始某種serve任務
• 對所有任務執行初始運行以為登台服務器准備文件
• 本地登台服務器與監視任務並行啟動
• myfile.scss由開發人員更新
• gulp觀察器啟動csscomb任務
• csscomb插件更改文件並替換它
• 觀察者任務會看到文件替換中的更改並再次啟動格式化任務...
• csscomb插件再次運行，依此類推...

這是導致此循環的代碼段。 （注意：這使用的是Gulp v4）

'use strict'

import { task, parallel, series, src, dest, watch, plugins } from './gulp';

import { startStagingServer } from './servers';

import { solution } from './solution.map';

const path = require('path');

task('serve', parallel(startStagingServer, watchStyles);

function watchStyles() {
  watch([ solution.src.styles ], series(formatStyles, compileStyles))
}

function formatStyles(done) {
  return src([ solution.src.styles ])
    .pipe(plugins.csscomb())
    .pipe(dest(solution.src.mount)) // the root of the solution
}

function compileStyles() {
  return src([ solution.src.styles ])
    .pipe(plugins.sass().on('error', plug.sass.logError))
    .pipe(dest(path.join(solution.dest.stage, 'serve')));
}

有誰知道避免這種情況的方法？

Answer 1

避免這種情況的方法是不將修復程序放在觀察程序中。 使用2個單獨的功能：一個可修復，而另一個則不能。 只看那些不看的。 例：

function taskJscsFix() {
    return gulp.src(path.JS)
        .pipe(jscs({
            configPath: './gulp/.jscsrc',
            fix: true
        }))
        .pipe(gulp.dest(path.SRC.JS));
}

function taskScripts() {
    return gulp.src(path.JS)
        .pipe(jscs({
            configPath: './gulp/.jscsrc'
        }))
        .pipe(jscs.reporter())
        .pipe(gulp.dest(path.DEST.JS));
}