Modifying a const in a gulpfile.js to work as I want it to do

Question

I'm working with a gulpfile.js I copied from a Sitepoint tutorial.

/** gulpfile.js (Edited to just show the bits I'm talking about!)  **/

const

  // source and build folders
  dir = {
    src         : 'dev-wp-gulp-sitepoint-theme/',
    build       : 'C:/xampp/htdocs/sites/wordpress-sites/wp-gulp-1/wp-content/themes/docs-wp-gulp-sitepoint-theme/'
  },

  // Gulp and plugins
  gulp          = require('gulp'),
  etc,
  imagemin      = require('gulp-imagemin'),
;

// image settings
const images = {
  src         : dir.src + 'images/**/*',
  build       : dir.build + 'images/'
};

// image processing
gulp.task('images', () => {
  return gulp.src(images.src)
    .pipe(newer(images.build))
    .pipe(imagemin())
    .pipe(gulp.dest(images.build));
});

/** End gulpfile.js **/

This works, but it doesn't quite do what I want it to do.

This is:

• look in src for any images in any folder (including the root)
• 'imagemin' and output the images and their respective folders (and in root) to the build folder.

I've spent quite a few hours trying out different ideas - none work as I want them to. My last attempt went like this (you can probably tell I'm not a javascript developer):

// image settings
const images = {

  src : {
    jpg: dir.src + '**/*.jpg',
    png: dir.src + '**/*.png',
    gif: dir.src + '**/*.gif',
  },
  build       : dir.build
};

// image processing
gulp.task('images', () => {
  return gulp.src(images.src.jpg.png.gif)
    .pipe(newer(images.build))
    .pipe(imagemin())
    .pipe(gulp.dest(images.build));
});

This immediately broke the gulp images task.

I'd be much obliged if someone could give some help with this :)

Answer 1

Try:

gulp.task('images', () => {
  return gulp.src([images.src.jpg, images.src.png, images.src.gif])

etc.