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 to minify the files and then rename for me.

But the tasks is currently written as (for one file)

gulp.task('minify', function () {
    gulp.src('foo.css')
        .pipe(minify({keepBreaks: true}))
        .pipe(concat('foo.min.css'))
        .pipe(gulp.dest('./'))
});

How to rewrite so it work with my variable files defined above?

Answer 1

You should be able to select any files you need for your src with a Glob rather than defining them in an object, which should simplify your task. Also, if you want the css files minified into separate files you shouldn't need to concat them.

var gulp = require('gulp');
var minify = require('gulp-minify-css');
var rename = require('gulp-rename');

gulp.task('minify', function () {
    gulp.src('./*.css')
        .pipe(minify({keepBreaks: true}))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(gulp.dest('./'))
    ;
});

gulp.task('default', ['minify'], function() {

});