gulp-rename icon indicating copy to clipboard operation
gulp-rename copied to clipboard

gulp-rename 1.4.0 does not signal async completion

Open oxy opened this issue 3 years ago • 7 comments

I recently ran yarn upgrade and my gulp builds for vscode started failing:

[01:43:25] The following tasks did not complete: compile-extensions-build
[01:43:25] Did you forget to signal async completion?

I bisected it by checking each dependency update with git bisect and traced it back to upgrading gulp-rename from 1.2.2 to 1.4.0. It appears that it fires an async task that it never completes, per the error message - and CHANGELOG.md doesn't have any records pre-2.0. Were there any breaking changes between the two releases that I need to account for?

oxy avatar May 05 '21 13:05 oxy

Can you include a full code sample and gulp version?

yocontra avatar May 05 '21 22:05 yocontra

Hey there - sorry about the delay on a response; I'm currently working through my final exams at university, so time is limited! I'll write a reproduction script over this weekend/early next week.

oxy avatar May 12 '21 11:05 oxy

This became a difficult problem to reproduce. I tried to reproduce this as a simple case in a different project than the real project:

Node Version: 16.14.0 and using yarn to install.

gulpfile.js

const gulp = require('gulp')
const glob = require('glob')
const rename = require('gulp-rename')
const source = require('vinyl-source-stream')
const print = require('gulp-print').default
const es = require('event-stream')
const browserify = require('browserify')

gulp.task('default', function (end) {
  glob('./app*.js', function (err, files) {
    if (err) end(err)

    var tasks = files.map(function (entry) {
      console.log('entry', entry)
      var bundleStream = browserify(entry).bundle()

      return bundleStream
        .pipe(source(entry))
        .pipe(rename({
          dirname: '',
          extname: '.js'
        }))
        .pipe(gulp.dest('./build'))
        .pipe(print(function (filepath) {
          return console.log('Completed JS: ' + filepath)
        }))
    })

    console.log('Waiting for merge')
    es.merge(tasks).on('end', () => {
      console.log('The end')
      end()
    })
  })
})

package.json

{
  "name": "gulp-error",
  "version": "1.0.0",
  "description": "",
  "main": "app1.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^16.5.2",
    "event-stream": "3.3.4",
    "gulp": "^4.0.2",
    "gulp-print": "^5.0.2",
    "gulp-rename": "^1.4.0",
    "vinyl-source-stream": "^2.0.0"
  },
  "dependencies": {}
}

app1.js

console.log('App 1')

app2.js

console.log('App 2')

The issue is not reproducible if you use these files and run them locally BUT it doesn't work in the real project that I have. I have double-checked that all dependencies are EXACTLY same and of same version.

I did a fresh install of node_modules and checked it on node 14.18.3 too but this didn't help.

In my case, I had this issue in gulp-rename 1.2.3 and onwards. For now, I've fixed the version to 1.2.2 in the project.

riteshjagga avatar Mar 02 '22 12:03 riteshjagga

@riteshjagga Can you use the built-in stream finished function instead of listening for the end event on the es.merge?

Also - usage of event-stream is not recommended, it's 3 years out of date and has a lot of issues dealing with newer streams - use a different library to merge the streams. Likely this is the root issue.

yocontra avatar Mar 03 '22 18:03 yocontra

@yocontra Thank you for the suggestion, listening the finished instead of end throws the error for 1.2.2. too. I'm not entirely sure if it is event stream issue. Finding more...

Inspecting in detail and found that commenting this line of code fixes the issue.

Just in case it is helpful, this line of code was added on 25 Aug 2015 few months after the npm publish of 1.2.2 on 02 Apr 2015.

Trying to use merge-stream now as it is recommended in a note by the event-stream to work with Gulp 4.

riteshjagga avatar Mar 14 '22 14:03 riteshjagga

Finally a solution to this problem,

Solution: Adding gulp-buffer in front of the gulp-rename (this package) solves the problem, as in

  const buffer = require('gulp-buffer')
  // ....
    .pipe(buffer())
    .pipe(rename({
      dirname: '',
      extname: '.js'
    }))
  // ....

For the complete gulpfile, please see this comment.

Possible Reason of Issue: I don't completely understand streams and buffers but I think this has to do with the file size which has to be renamed. When I tried to reproduce this, the file size could have been very small and rename didn't throw the error but it throws the error in the real project where file size is large.

Also repeating here that it was the cloning of file in the gulp-rename package which led to this error.

riteshjagga avatar Apr 27 '22 10:04 riteshjagga

Got a similar issue:

I have a folder with subfolders and tens of scss files that needs to be processed into similar folders without combining.

e.g.

src/ -folder_1/ --file_1.scss -folder_2/ --file_2.scss

to

build/ -folder_1/ --file_1.css --file_1-rtl.css -folder_2/ --file_2.css --file_2-rtl.css

$.gulp.task("styles:page", () => {
        let fileBase = "src/";
        return (
            $.gulp
                .src([
                    fileBase + "**/*.{scss,map}", 
                ])
                .pipe(
                    scss({
                        outputStyle: "compressed",
                    })
                )
                .pipe(
                    autoprefixer({
                        overrideBrowserslist: ["last 3 versions"],
                    })
                )
                .pipe(
                    rename(function (path) {
                        // Returns a completely new object, make sure you return all keys needed!
                        return {
                            dirname: path.dirname,
                            basename: path.basename + "-rtl",
                            extname: ".css",
                        };
                    })
                )
                .pipe($.gulp.dest("./build"))
                .pipe($.browserSync.stream())
        );
 });

I tried

  1. gulp-buffer before the rename
  2. all ways described in npm readme - mutation, map
  3. different version of package

i noted that providing a fixed value to dirname - works well. Providing a same variable e.g. path.dirname = path.dirname, or omitting it - results in the above mentioned error.

this only happens with dirname. basename works well and extname as well.

so basically, I can achieve that:

build/ -file_1.css -file_1-rtl.css -file_2.css -file_2-rtl.css

but I can't achive the above mentioned structure of folders.

styurenkov-b2broker avatar Jul 21 '23 08:07 styurenkov-b2broker