javascript - Gulp 4 手表未检测到更改

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'), '/')
}