Not working with subfolders

[dandaka]

Expected behaviour:

1. gulp-responsive takes files from subfolders
2. transforms them
3. puts in subfolders in the output folder

Code:

gulp.task('responsive2', function () {
  gulp.src('./src/img/**/*.jpg')
    .pipe(print())
    .pipe(responsive([{
      name: 'banner.jpg',
      width: 600
      }],
      {
        errorOnUnusedImage: false
      }
    ))
    .pipe(gulp.dest('./public/img/'));
});

Log:

[frontend-boilerplate] gulp responsive2                               master  ✭
[15:31:46] Using gulpfile ~/projects/frontend-boilerplate/gulpfile.js
[15:31:46] Starting 'responsive2'...
[15:31:46] Finished 'responsive2' after 9.45 ms
[15:31:46] src/img/imgs/banner.jpg

stream.js:75
      throw er; // Unhandled stream error in pipe.
      ^
Error: Available images do not match following config:
  - `banner.jpg`

[dandaka]

Hi, any news on this? Maybe you could direct me to find the fix somewhere?

[mahnunchik]

Hi @dandaka could you please reproduce the error with gulp-responsive@2.0.0. It should log the filename.

[dandaka]

I think I get idea, why it doesn't work. I got this code working:

// Test subfolders
gulp.task('responsive-subfolders', function () {
  gulp.src(['./src/content/portfolio/**/*.png'])
  .pipe(print())
  .pipe(responsive({
      '**/*.png': [
        {
          width: 2000,
          rename: rename2000,
          quality: 80
        }]},
    {
      errorOnUnusedImage: false,
      errorOnEnlargement: false
    }))
  .pipe(gulp.dest('./tmp/'));
});

The difference is in this line: '**/*.png': [ — no error '*.png': [ — Error: Available images do not match following config:

Is it a bug? Since in your example you don't specify folders (only filenames), expected behaviour here is the same — no **/, only file *.png.

[mahnunchik]

Hi @dandaka

It is exactly how minimatch works.

minimatch is used by gulp itself. So I decided to use the same matching library for my plugin.

match any file and any subfolder

gulp.src(['./src/content/portfolio/**/*.png'])
  .pipe(responsive({
      '**/*.png': [{...}]
    }))

match any file

gulp.src(['./src/content/portfolio/*.png'])
  .pipe(responsive({
      '*.png': [{...}]
    }))

match any file

gulp.src(['./src/content/portfolio/*.png'])
  .pipe(responsive({
      '**/*.png': [{...}]
    }))

not match

gulp.src(['./src/content/portfolio/**/*.png'])
  .pipe(responsive({
      '*.png': [{...}]
    }))

[dandaka]

Thank you for clarification. Still think it is strange behaviour.