Gulp 4 watch doesn't detect changes

Question

Is it possible with gulp v.4.0.0 to watch for files outside of the folder where gulpfile.js is located?

In older gulp it was possible to set file path to ../../someFile.css and watch for its changes, but in v4 it doesn't detect changes for the same path.

// 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

Changes to files ['../../style1.scss', '../../style2.scss'] will not be detected, but they will be for './js/main.js'. Am I missing something?

Answer 1

Problem with new Gulp 4 watch task is in paths. Unlike watch task from Gulp 3, new version is unforgiving and requires correct path structure with correct paths separators.

So instead of using paths that may result in ..\\..\\root\\/style1.scss, we must convert paths to proper structure like ../../root/style1.scss.

This simple function helps and the rest is handled by gulp and nodejs

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

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