javascript - Gulp 4 watch 未检测到更改

Question

是否可以使用 gulp v.4.0.0 监视 gulpfile.js 所在文件夹之外的文件？

在旧的 gulp 中，可以将文件路径设置为 ../../someFile.css 并观察它的变化，但在 v4 中它不会检测同一路径的变化。

// snip....

let rootFolder = '..\..\root\';

// Watch function
let watchThis = (filePath, gulpTasks) => {
    gulp.watch(filePath, gulp.series(gulpTasks))
        .on('change', function(path) {
            console.log(`${chalk.blue('Changed')}: ${chalk.yellow(path)}`);
        })
        .on('unlink', function(path) {
            console.log(`${chalk.red('Deleted')}: ${chalk.yellow(path)}`);
        });
}

// Watch task configuration
let watchFiles = () => {
    watchThis([`${rootFolder}/style1.scss`, `${rootFolder}/style2.scss`], 'scss')
    watchThis('./js/main.js', 'js')
}

// Final watch task
gulp.task('watch', gulp.series(
    'development',
    gulp.parallel(
        watchFiles,
        'startLiveServers'
    )
));

// ...snip

对文件 ['../../style1.scss', '../../style2.scss'] 的更改将不会被检测到，但它们将用于 './js/main.js'。我错过了什么吗？

Answer 1

新 Gulp 4 监视任务的问题在于路径。与 Gulp 3 的 watch 任务不同，新版本是无情的，需要正确的路径结构和正确的路径分隔符。

因此，我们必须将路径转换为适当的结构，如 ../，而不是使用可能导致 ..\\..\\root\\/style1.scss 的路径。 ./root/style1.scss.

这个简单的函数有帮助，其余的由 gulp 和 nodejs 处理

let fixPath = (oldPath) => {
    const pathString = oldPath;
    const fix = /\\{1,}|\/{1,}/;

    return pathString.replace(new RegExp(fix, 'gm'), '/').replace(new RegExp(fix, 'gm'), '/')
}