Support subfolder **/* glob pattern?

[patrickcate]

I've organized a bunch of images into subfolders and am trying to do a batch resize of them. I've tried using the subfolder **/* glob pattern in the source, but it doesn't seem to work. Below is my config:

gulp.src(['_source/assets/images/**/*.jpg'])
    .pipe(responsive(
    {
        '*.jpg':
        [{
            width: 160,
            rename:
            {
                suffix: '--mini'
            }
        }]
    },
    {
        strictMatchImages: false,
        strictMatchConfig: false
    }))
.pipe(gulp.dest('images'));

When I run the task with strictMatchConfig set to true I get the error:

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

When set to false the error doesn't show, as expected, but either way all images in the subfolders are ignored.

Changing the src to one of the subfolders like _source/assets/images/portraits/*.jpg runs fine.

Am I doing something wrong or is there a workaround? I appreciate any help.

[mahnunchik]

Hi @patrickcate

gulp-responsive uses the same filename matching library as gulp (https://github.com/isaacs/node-glob).

So in case when you specify sources as _source/assets/images/portraits/*.jpg then all files are matched by pattern *.jpg.
When you specify sources as _source/assets/images/**/*.jpg only first level files are matched by pattern *.jpg.

To math all files in sources and in gulp-responsive config you should specify _source/assets/images/**/*.jpg and for example **/*.jpg.

[agborkowski]

works perfect thanx ! 🍻 can be add to examples !

gulp.task('default', function () {
  return gulp.src('resources/uploads/**/*.png')
    .pipe(
      responsive(
      {
        '**/*.png' : [{
          width: 50,
          rename: {
            //path.dirname += "";
            prefix: "50-x-",
            suffix: "-thumb"
            //path.extname = ".md"
          }
        }]
      })
    )
    .pipe(gulp.dest('webroot/galleries'));
});

[mahnunchik]

@agborkowski thank you for using gulp-responsive 😉

Maybe you will be interested in the following module: gulp-responsive-config

It is just a proof of concept generation responsive configuration from CSS or HTML, for example following CSS:

.test {
  background-image: url(image-100x200.png);
}
.retina-test {
  background-image: url(image-100x200@2x.png);
}

will be parsed to:

[{
  name: "image.png",
  width: 100,
  height: 200,
  rename: "image-100x200.png"
},{
  name: "image.png",
  width: 200,
  height: 400,
  rename: "image-100x200@2x.png"
}]

and it can be passed directly to gulp-responsive. Profit!

Short example:

gulp.src('/images/**/*.png')
  .pipe(gulpResponsive(gulpResponsiveConfig('/path/to/styles.css')))
  .pipe(gulp.dest('build'));

Currently gulp-responsive-config has no documentation and tests, but I plan to do it.

[JosefJezek]

👍

[patrickcate]

Confirmed, this works.

[agborkowski]

🍻 !