Only minify images on --production build

sage
1

Hi,

What would it look like to modify the gulpfile.js to only optimize images when the --production flag is being used? Basically it takes forever to optimize my images and I’d like to just skip that step when gulping locally.

Thanks,
Jason

2

Under

gulp.task('images', function() {

replace

.pipe($.imagemin({
  progressive: true,
  interlaced: true,
  svgoPlugins: [{removeUnknownsAndDefaults: false}]
}))

with

  .pipe(gulpif(enabled.minify, $.imagemin({
    progressive: true,
     interlaced: true,
    svgoPlugins: [{removeUnknownsAndDefaults: false}]
    })))

where enabled.minify can be changed to a custom variable, but is set on line 41

// CLI options
 var enabled = {
// Enable static asset revisioning when `--production`
rev: argv.production,
// Disable source maps when `--production`
maps: !argv.production,
// Fail styles task on error when `--production`
failStyleTask: argv.production,
minify: argv.production
};
2 Likes
3

Thanks for that snippet!

4

No prob.

I just had to edit it because I noticed the ending brackets were incorrect so if it throws an error, try the latest.

5

I’m getting an error for some reason. I’m sure it’s something stupid.

This is what I had before we changed anything:

gulp.task('images', function() {
  return gulp.src(globs.images)
    .pipe(imagemin({
      progressive: true,
      interlaced: true,
      svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}]
    }))
    .pipe(gulp.dest(path.dist + 'images'))
    .pipe(browserSync.stream());
});

And I noticed elsewhere in the gulpfile they’re doing conditional stuff like this:

.pipe(function() {
      return gulpif(argv.production, uglify());
    })

Not sure if I should implement the conditional more like that?

-J

6

You’re right, I maybe should have tested it before I posted a snippet :flushed:

Here’s my modified snippet:

.pipe(gulpif(enabled.minify, $.imagemin({
  progressive: true,
  interlaced: true,
  svgoPlugins: [{removeUnknownsAndDefaults: false}]
})))
1 Like
7

Beautiful. Thanks for the update!