CODEWITHSUNDEEP
gulp
designosis
designosis

Reputation: 5263

In Gulp, how do you minify a css file, then append it to an already minified css file?

I have a large minified css file and a small non-minified file. I'll be changing the non-minified file regularly, but I want them combined. However re-minifying a large minified file takes WAY too long.

What I want is something like this ...

var cssnano = require('gulp-cssnano');
var cssjoin = require('gulp-cssjoin');

gulp.task('cssjoin', function() {
    gulp.src( 'changing.css' )
    .pipe(cssnano())
    .pipe(rename( 'changed.min.css' ))
    .pipe(gulp.dest( '.' ));

    gulp.src( ['big.min.css','changed.min.css'] )
        .pipe(cssjoin())
        .pipe(gulp.dest( 'final.min.css' ))
});

Basically, first minify the small file, then join it to the end of the large one. The code above doesn't work of course, tasks need a return in the function, etc.

I also want to delete 'changed.min.css' once the join is done.

I tried various combinations of things for 3 hours without finding a working solution. How would one go about solving this?

Upvotes: 0

Views: 120

Answers (1)

Sven Schoenung
Sven Schoenung

Reputation: 30574

You can use gulp-add-src to append big.min.css to the stream. That way you only run cssnano() on changed.css, not both files.

Afterwards you use gulp-concat to combine both files into a single new final.min.css:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');
var addsrc = require('gulp-add-src');

gulp.task('cssjoin', function() {
  return gulp.src('changing.css')
    .pipe(cssnano())
    .pipe(addsrc.append('big.min.css'))
    .pipe(concat('final.min.css'))
    .pipe(gulp.dest('.'));
});

There's no need to delete an intermediary changed.min.css with this since none is written to disk. All operations occur in-memory.

Upvotes: 1

Related Questions