Adding sourcemaps to Gulp cause incomplete build on watch

[Farsad]

What were you expecting to happen?

Gulp should process all the files and write the results to the destination when called from the watcher and creating sourcemap.

What actually happened?

Gulp writes the results on the destination only for the first 46 files in pipelines.

Description and samples

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 watcher 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 yarn 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 the gulp task. Then the CSS files created successfully for both build_dev and the call from the watcher.

I tried it with both gulp 4 sourcemaps and gulp-sourcemaps package, but both have the issue!

• OS & version MacOS 10.15.7 (It happens on Widnows machine as well)
• Yarn version 1.17.0
• npm version (run npm -v):
• gulp version CLI version 2.3.0 / Local version: 4.0.2

[phated]

You are using watch wrong. Listening for the change event doesn't know about the gulp task system.

[Farsad]

@phated Thank you for your help.

I just tested and have the same issue if I write it like this as well.

gulp.watch(`./htdocs/wp-content/themes/project*/css/**/*.scs`, cb=>{ themesStyles(); cb() })

[phated]

That's not how you use the task system. Perhaps you should go read https://gulpjs.com/docs/en/getting-started/async-completion

[Farsad]

@phated Thank you. But I can't see your point.

The watch gulp.watch(..., cb=>{ themesStyles(); cb() }) is similar to the function and watcher for css defined in the first sample here: https://gulpjs.com/docs/en/getting-started/watching-files/

And the themesStyles is a function that returns a stream similar to the first sample of the link you gave me: https://gulpjs.com/docs/en/getting-started/async-completion/

Mind you tell me what is exactly wrong here?

[phated]

You have to use tasks like: gulp.watch(..., themeStyles)

You can't just call a task as a function and expect it to behave correctly within gulp. You must allow the task system to handle the async completion. Streams are always async, so if you call themeStyles() like you did, there is no way for gulp to know when everything has been processed by the stream.

[Farsad]

@phated Thank you very much. 🥇