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?

Do you mean that you are looking to iterate the properties of your 'files' object? (PS: Is there a reason it is an object? I might have expected this to be an array, based on its name..?) — ne1410s, Sep 10 '14 at 11:54
Just an FYI `gulp-minify-css` has been [deprecated](https://www.npmjs.com/package/gulp-minify-css) in favor of [gulp-clean-css](https://github.com/scniro/gulp-clean-css) — scniro, Mar 02 '16 at 00:29

score 64 · Answer 1 · answered Sep 10 '14 at 16:58

64

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() {

});

answered Sep 10 '14 at 16:58

Doodlebot

926
5
9

1

When I do this, it's creating new files with .min.min.css each time I save. Why is it doing that? – Megaroeny Dec 18 '15 at 20:51
5

On src, you can always specify files to ignore using "!". Example (you want to exclude all *.min.css files on your css folder and subfolder: `gulp.src(['css/**/*.css', '!css/**/*.min.css'])` – intellion Feb 02 '16 at 18:57

bbuie · Answer 2 · 2015-10-22T23:09:07.233

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.

score 2 · Answer 3 · answered Mar 23 '17 at 22:59

This is what I have done

var injectOptions = {
     addSuffix: '?v=' + new Date().getTime()
};

Then

return gulp.src('*.html')
    .pipe(wiredep(options))
    .pipe(inject(injectSrc, injectOptions))
    .pipe(gulp.dest(''));

end result is unique timestamp added

Example in index.html

   <script src="/public/js/app.js?v=1490309718489"></script>

CSS minify and rename with gulp

3 Answers3

Linked