CSS minify and rename with gulp

Question

I\'ve a variable like

var files = {
    \'foo.css\': \'foo.min.css\',
    \'bar.css\': \'bar.min.css\',
};

What I want the gulp to do for me is

Answer 1

I tried the earlier answers, but I got a never ending loop because I wasn't ignoring the files that were already minified.

First use this code which is similar to other answers:

//setup minify task
var cssMinifyLocation = ['css/build/*.css', '!css/build/*.min.css'];
gulp.task('minify-css', function() {
  return gulp.src(cssMinifyLocation)
    .pipe(minifyCss({compatibility: 'ie8', keepBreaks:false}))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(stylesDestination));
});

Notice the '!css/build/*.min.css' in the src (i.e. var cssMinifyLocation)

//Watch task
gulp.task('default',function() {
    gulp.watch(stylesLocation,['styles']);
    gulp.watch(cssMinifyLocation,['minify-css']);
});

You have to ignore minified files in both the watch and the task.