Adding sourcemaps to Gulp cause incomplete build on watch

[Farsad]

Hello,

I have a gulp task that converts Scss to CSS and makes sourcemaps. When I call it from a gulp.series, it works fine. But the same function called from a watch compiles only the first 46 files!

Here is the function:

export function themesStyles() {
    const isDev = process.env.NODE_ENV === 'development'
    const isProd = process.env.NODE_ENV === 'production'
    return gulp.src(`${basePath}project*/css/**/*.scss`, {
        base: basePath,
        allowEmpty: true,
        sourcemaps: true
    })

        .pipe(gulpif(isDev, dependents()))
        .pipe(gulpIgnore.include(paths.themes.styles.src.map(src => `project*/${src}`)))
        .pipe(sass())
        .pipe(rename(function (path) {
            ...
            if (isProd) path.extname = `.min${path.extname}`
        }))
        .pipe(debug({title: 'compiled:'}))
        .pipe(gulp.dest(basePath, {sourcemaps: '.'}))
}

This is the function to call from yart for build:
export const build_dev = gulp.series(themesStyles)
When the function called from this one, All the scss files (98) converted to CSS and the sourcemaps files created successfully.

We have another task:
export const dev = gulp.series(devServer)
The devServer function is:

export function devServer() {

    browserSync.init(browserSyncConfig)

    gulp.watch(`./htdocs/wp-content/themes/project*/css/**/*.scss`).on('change', (file) => {
        return themesStyles().pipe(browserSync.stream({match: '**/*.css'}));
    })

    gulp.watch(paths.deprecated.scripts.src).on('change', () => {
        browserSync.reload()
    })
}

The issue is when this gulp watch call themesStyles() then the logs on the terminal show all the files are compiled and there is no error. But when I check the files only the first 46 files get compiled.

...
[17:17:29] compiled: htdocs/wp-content/themes/project97/dist/css/styles.css
[17:17:30] compiled: htdocs/wp-content/themes/project98/dist/css/styles.css
[17:17:30] compiled: 98 items

I tested and it works fine in just one case that I remove sourcemaps option from gulp task. Then the css files created successfully for both build_dev and the call from the watcher.

Also, I tried it with both gulp 4 sourcemaps and gulp-sourcemaps package, but both do the same!

Does anyone have any idea why this is happening? Should I make a bug report?

[begin-again]

may be nothing but in themesStyles() you have are checking for production with const isProd = process.env.NODE_ENV === 'production'. I also see a reference to isDev but no definition for that variable.

[Farsad]

Thanks, I forgot to add that here. I just added it to the first post.

[begin-again]

what version of NodeJS? Want to rule out a problem with chokidar 2 on v14+

[Farsad]

Node version v12.18.3
macOS 10.15.7
Gulp CLI version: 2.3.0
Gulp Local version: 4.0.2

Thank you for your help.

[begin-again]

I'm probably poor help.

I normally use 'all' instead of 'change' to ensure that I get the 'add' & 'unlink' events, but that doesn't seem to be the problem since it the file that changed is not a consideration. It should return the same result no matter where it is called. Seems like a bug.

[pludikar]

I suspect this is a bug. I have a similar, and possibly related, issue.
if I have this:

gulp.watch([PHPWatchFiles, jsWatchDistFile, cssWatchDistFile]).on('change', **browserSync.reload**);

cssWatchDistFile always fails to trigger the reload, but the other two don't. cssWatchDistFile is the result of a slightly more complicated task compared to the other two. (** are there as a highlight - I wanted bold, but Markdown doesn't seem to allow that in a code block)

but it works doing this:
gulp.watch([PHPWatchFiles, jsWatchDistFile, cssWatchDistFile]).on('change', **()=>{browserSync.reload()}**);

In principle, both statements should be identical, but that extra function call seems to, possibly, add just enough delay to make it work.

Full gulpfile.js attached.
gulpfile_js.txt

CLI version: 2.3.0
Local version: 4.0.2
node version: v14.15.4
Windows 10

[Farsad]

Hi, It doesn't seem like a similar issue. The watcher doesn't work on your case. But in my case, the watcher works fine and the process gets started and finished successfully. But some pipelines dropped before writing the data to files.

[Farsad]

There is another duplicated ticket #2552 contains the answer to fixing the issue.