Gulp v5.0.0. Problem via src usage with external gulpfile.js

[Dmitriy-Frostoff]

What were you expecting to happen?

Expected npx gulp --gulpfile ./configs/gulp/gulpfile.js html to bundle html file via gulp-file-include plugin and a few more ones (check the gulpfile.js for details).
P.S. via [email protected] and [email protected] everything works fine.

What actually happened?

Got the exception with the globs argument according to Gulp official docs.

Please give us a sample of your gulpfile

Link to my bolerplate

gulpfile.js is at configs/gulp/gulpfile.js

Terminal output / screenshots

$ npx gulp --gulpfile ./configs/gulp/gulpfile.js html
[23:08:48] Working directory changed to E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\configs\gulp
[23:08:48] Using gulpfile E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\configs\gulp\gulpfile.js
[23:08:48] Starting 'html'...
[23:08:48] 'html' errored after 24 ms
[23:08:48] Error: File not found with singular glob: E:/Code learning/boilerplate-webpack-gulp-html-scss-js-components/projectName/src/pages/index
_gulp_include.html (if this was purposeful, use `allowEmpty` option)
    at E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\glob-stream\index.js:305:19
    at Array.forEach (<anonymous>)
    at EventEmitter.onEnd (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\glob-stream\index.js:302:11)
    at Object.onceWrapper (node:events:633:28)
    at EventEmitter.emit (node:events:519:28)
    at EventEmitter.emit (node:domain:551:15)
    at queue.drain (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\glob-stream\index.js:36:8)
    at Task.release (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\fastq\queue.js:179:12)
    at worked (E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\fastq\queue.js:223:10)
    at E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\node_modules\glob-stream\index.js:82:9

Please provide the following information:

• OS & version [e.g. MacOS Catalina 10.15.4]: Windows 10 Pro v1803
• node version (run node -v): v21.7.1
• npm version (run npm -v): 10.5.0
• gulp version (run gulp -v): 5.0.0

Steps to reproduce:

• copy the boilerplate
• install the dependencies
• check out that the command

npm run html

works fine;

• remove gulp via

npm un gulp

• install actual gulp package via

npm i -D gulp

• run

npx gulp --gulpfile ./configs/gulp/gulpfile.js html

Additional information

The problem occurs only when gulpfile.js placed not in a root of a project (in a root folder it works fine with the relevant src paths).
Via [email protected] and [email protected] everything works fine.
No globally installed packages were used.
The boilerplate is set to use modules (type: module in package.json is set). Check the description for more.

P.S. Thank you the Gulpjs Team for Hard work and Tools!!! gulpjs.com/docs is Awesome resource for learning the tool! I really enjoyed the way you've done it - imho, one of the best ever!
Great job done, Team!)))

[phated]

Thanks for the report. I haven't debugged anything here, but I think the issue is that glob-stream always starts at the cwd and your cwd is being changed to the location of the gulpfile.

Can you try adding an explicit cwd to your src? Something like { cwd: "../.." } as the second argument

[phated]

If the above proves to solve the issue, we may need to resolve the "most common directory" of all globs to start the walkdir 🤔

[Dmitriy-Frostoff]

Blaine, thanks for your help!!! 🙏 🙏 🙏 🙏
Your tip cured the situation! 👍 👍 👍 👍

I've followed your tip and done this steps:

• set src relative to the project root
• add cwd: "../../" as the optional (second) parameter
• src done it's work smoothly
  my actual gulpfile.js, placed in the configs/gulp/gulpfile.js (as previously), now looks like this:

Current gulpfile.js config

import gulp from 'gulp';
const { src, dest, series } = gulp;
import include from 'gulp-file-include';
import replace from 'gulp-replace';
import rename from 'gulp-rename';

export function html() {
  return src('projectName/src/pages/index_gulp_include.html', {
    cwd: '../../',
  })
    .pipe(
      include({
        prefix: '@@',
        indent: true,
      }),
    )
    .pipe(replace(/="(\.\.\/){2,}/gi, '="../'))
    .pipe(rename('index.html'))
    .pipe(dest('../../projectName/src/pages/'));
}

The bash log

$ npx gulp --gulpfile ./configs/gulp/gulpfile.js html
[11:30:15] Working directory changed to E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\configs\gulp
[11:30:15] Using gulpfile E:\Code learning\boilerplate-webpack-gulp-html-scss-js-components\configs\gulp\gulpfile.js
[11:30:15] Starting 'html'...
[11:30:15] Finished 'html' after 351 ms

P.S. and especially thanks for clearing up how to use optional cwd, root parameters. My knowledge of gulp has been strengthened now 👍👍👍👍

[Dmitriy-Frostoff]

As notice if you won't mind:
interesting thing but dest is set to be relative to the current place of the gulpfile.js and it works as expected (places bundled html file to the projectName/src/pages/index.html relative to the root). 🤔

[Patta]

I can confirm, that src can no longer handle ../ at the beginning. This is the case when gulpfile is in a subdirectory like Build and Resources is outside of Build.

src('../Resources/Private/Sass/*') no longer works
src('Resources/Private/Sass/*') works

PS: dest works sometimes with ../ at the beginning, but not in all cases.