Gulp 4 手表未检测到更改答案

【问题标题】：Gulp 4 watch doesn't detect changesGulp 4 手表未检测到更改
【发布时间】：2018-12-21 17:58:16
【问题描述】：

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'。我错过了什么吗？

【问题讨论】：

标签： javascript node.js gulp gulp-4

【解决方案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'), '/')
}

【讨论】：