Как последовательно выполнять обработку watcher.on и другие задачи наблюдения? - PullRequest
Новая
       15

Как последовательно выполнять обработку watcher.on и другие задачи наблюдения?

3 голосов
/ 25 октября 2019

Есть ли способ последовательно выполнить процесс watcher.on и другие задачи наблюдения?

Я использую метод on экземпляра chokidar gulp.watch, чтобы получить только имяотредактированного файла. 

function sass_compile(path) {
    return src("./style/**/*.scss")
        .on("end", () => {
            console.log("completed" + path + "!");
        })
        .pipe(sass())
        .pipe(dest("css"))
}

function reload(done) {
    browserSync.reload();
    done();
}

exports.default = function () {
    browserSync.init();
    watch("./style/**/*.scss").on("change", (path) => {
        sass_compile(path);
        console.log("completed?");
    });
    watch(["./style/**/*.scss", "./js/**/*.js", "./tests/**/**/*.spec.js"], reload);
};

Если вы редактируете файл scss в этом состоянии, журнал отображается в терминале следующим образом. Это указывает на то, что перезагрузка может начаться до завершения компиляции SCSS. 

[Browsersync] Serving files from: ./
completed?
[03:18:58] Starting 'reload'...
[03:18:58] Finished 'reload' after 1.3 ms
completedsass\_variables.scss!
[Browsersync] Reloading Browsers...

Поскольку это условие небезопасно, я надеюсь, что приведенный выше вывод журнала будет улучшен следующим образом: 

[Browsersync] Serving files from: ./
completed?
completedsass\_variables.scss!
[03:18:58] Starting 'reload'...
[03:18:58] Finished 'reload' after 1.3 ms
[Browsersync] Reloading Browsers...

Эта проблема сбивает меня с толку, потому что одна задача использует экземпляр chokidar. Как этого достичь?

Мой package.json выглядит так: 

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2",
  }
}

1 Ответ

4 голосов
/ 29 октября 2019

Это можно сделать с помощью series(). Если вы хотите передать аргументы, вы можете использовать метод bind , и задача будет зарегистрирована как «связанная задача» на консоли. 

[Browsersync] Serving files from: ./
[03:18:58] Starting 'bound sass_compile'...
completedsass\_variables.scss!
[03:18:58] Finished 'bound sass_compile' after 1.3 ms
[03:18:58] Starting 'reload'...
[03:18:58] Finished 'reload' after 1.3 ms
[Browsersync] Reloading Browsers...

watch("./style/**/*.scss").on("change", path => {
    gulp.series(sass_compile.bind(this, path), reload)();
});
...