gulpfile で変更のあったファイル名を取得したい

Question

監視対象の中で、変更のあったファイル名を取得したいです。
引数にはオブジェクトを渡しており、その中身はパターンで指定しているため、
ファイルの名前を取得してそのあとの処理に渡していきたいです。

// 監視するファイルのパス
const path = {
	html: "./*.html",
	js: "js/*.js",
	sass: "sass/**/*.scss",
};

// Sass のコンパイル
function compileSass(done) {

	src(path["sass"])
	.pipe(sass({outputStyle: "expanded"})) // この後に処理をつなげて取得したファイル名を渡したいです
	.pipe(dest("css"));

	done();
}

// ブラウザの更新
function reload(done) {
	browserSync.reload();
	done();
}

// 標準で実行されるタスク
exports.default = () => {

	browserSync.init({
		browser: 'Google Chrome',
		server: {
			baseDir: './',
			index: './index.html',
		},
	});

	// Sass に変更があったらコンパイル
	watch(path['sass'], compileSass);

	// 監視対象のファイルに変更があったらブラウザの更新
	watch(Object.keys(path).map(key => path[key]), reload);
};

exports.build = series(compileSass, reload);

ちなみに最新では関数 task は非推奨になっているため、↑の書き方に適合した解決策でお願いします。
調べると event.path でファイル名を取得できるみたいな記事が見つかりますが、今の私の書き方で pipe の中の
処理にこれを引数として渡したら undefined になってしまいました。

Answer 1

gulp では、ファイルの監視に glob-watcher を使用しています。そして、 glob-watcher のドキュメントによれば、 path や stats の取得には未加工の chokidar インスタンスを使用する必要があります。この内容は gulp のドキュメントにも記載されています。

Chokidar instance

The watch() method returns the underlying instance of [chokidar][chokidar-external], providing fine-grained control over your watch setup. Most commonly used to register individual event handlers that provide the path or stats of the changed files.

When using the chokidar instance directly, you will not have access to the task system integrations, including async completion, queueing, and delay.

これを使用すると、質問文のコードは以下のようになります。

const {
    dest,
    series,
    src,
    watch,
} = require("gulp");
const sass = require("gulp-sass");
const browserSync = require("browser-sync");
const path = {
    html: "./*.html",
    js: "js/*.js",
    sass: "sass/**/*.scss",
};

function compileSass(filePath) {
    return src(path["sass"])
        .pipe(sass({outputStyle: "expanded"}))
        .on("end", _ => {
            if (typeof filePath === "string") console.log(`Compiled '${filePath}'`);
        })
        .pipe(dest("css"))
}

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

exports.default = () => {
    browserSync.init({
        browser: 'Google Chrome',
        server: {
            baseDir: './',
            index: './index.html',
        },
    });
    watch(path['sass']).on("change", (path) => {
        compileSass(path);
    });
    watch(Object.keys(path).map(key => path[key]), reload);
};

exports.build = series(compileSass, reload);

---

追記

exports.default = () => {
    browserSync.init({
        browser: 'Google Chrome',
        server: {
            baseDir: './',
            index: './index.html',
        },
    });
    watch(path['sass']).on("change", (path) => series(compileSass.bind(this, path), reload)());
    watch(Object.values(path).filter(value => value !== path["sass"]), reload);
};

Comments

[NAOPI-05]

ご回答ありがとうございます。

確かにこれで変更のあったファイル名を取得することはできましたが、
ファイルを保存すると `compileSass` と `reload` が逐次処理されず、
Sassのコンパイルが終了する前にブラウザが更新されてしまいます。

ファイル名を取得できる状態で、なおかつSassをコンパイルしてからブラウザを更新する方法はお分かりでしょうか？

[s8_chu]

> ファイルを保存すると `compileSass` と `reload` が逐次処理されず、
恐らく、追記したように「Scss ファイルのコンパイルとページのリロード」に `series` 関数を用いることで、その問題は解決すると思います。

[NAOPI-05]

追記のコードを見させてもらいました。こういった書き方もできるんですね。
自分も gulpfile をもっとカスタマイズできるように知識を吸収する必要があると感じました。
遅くなり申し訳ありません。ご教授ありがとうございました。