CODEWITHSUNDEEP
csstwitter-bootstrapgulpgulp-concatgulp-clean-css
Run
Run

Reputation: 57276

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

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?

Upvotes: 1

Views: 1178

Answers (2)

Zvezdochka
Zvezdochka

Reputation: 1338

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.

Upvotes: 0

Michal
Michal

Reputation: 61

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.

Upvotes: 1

Related Questions