Gulp - the best way of minifying multiple css files into one?

Question

What is the best way of minify multiple css files into one?

The gulp task below causing two issues after the minification and concatenation:

1. bootstraps glyphicons that I use have disappeared.
2. some of my styles are broken. The task seems to have re-arranged the position of some styles, for instance .footer{...} was placed below html{...} but it is now above html{...}. How can i stop it from rearranging them?

gulpfile:

gulp.task('minify-css', function() {
    return gulp.src([
        'node_modules/bootstrap/dist/css/bootstrap.css',
        'vendor/jquery-ui-1.12.1/jquery-ui.min.css',
        'node_modules/bootstrap/dist/css/bootstrap-theme.css',
        'node_modules/jasny-bootstrap/dist/css/jasny-bootstrap.css',
        'css/style.css',
        ])
        .pipe(sourcemaps.init())
        .pipe(cleanCSS({debug: true}))
        .pipe(sourcemaps.write())
        .pipe(concat('bundle.min.css'))
        .pipe(gulp.dest('dist'));
});

Any ideas?

Answer 1

I don't know if it help you but I think you could use SASS preprocessing by gulp-sass. There you could import all of your dependencies and let gulp-sass to minify the result. I have similar approach in my gulp devstack. SASS (libsass) can import *.css files, e.g. in your main.scss you can write

@import "path/to/file";

Note that without .css extension! If you not familiar with SASS I recommend to give it a chance.

Answer 2

It's not a common solution but sometimes it helps. I make two min. bundles: 'head.bundle.min.css' and 'foot.bundle.min.css' just like you did. In head.bundle.min.css I collect styles which must be first. And finally I concatenated two min bundles in one.