CODEWITHSUNDEEP
javascriptcssgruntjsgulpwebpack
Yurii Kovalenko
Yurii Kovalenko

Reputation: 419

How to concat css files with images and fonts form Bower in Grunt/Gulp/Webpack

I have a project with some bower components. Head of my index.html looks like:

<link href="js/vendors/bootstrap/dist/css/bootstrap.css" rel="stylesheet" />
<link href="js/vendors/jquery-ui-custom/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="css/main.css" />

I want to minify and concat stylesheets. Is there solution to concat all css files in one bundle and copy images/fonts in new directory with new bundle.css file?

I found npm grunt-concat-css but seems it only concat files and I have to use some copy tasks for copy images and fonts to new directory.

Upvotes: 1

Views: 749

Answers (2)

vorillaz
vorillaz

Reputation: 6296

You can use gulp-concat-css as:

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
var files = [
'js/vendors/bootstrap/dist/css/bootstrap.css',
'js/vendors/jquery-ui-custom/jquery-ui.css',
'css/main.css'
];

gulp.task('default', function () {
  return gulp.src(files)
    .pipe(concatCss("bundle.css"))
    .pipe(gulp.dest('out/'));
});

Upvotes: 0

Wilmer SH
Wilmer SH

Reputation: 1417

In Gulp I use npm's wiredep so that my bower dependencies are automatically managed for me.

I DO concatenate and uglify vendor js and css myself. I do so using useref which works like a charm.

Also, you can use inject so that your own dependencies are automatically maintained by gulp.

Note: If you decide to wiredep you can call your gulp task from bower on every install/uninstall. That way you never... ever... have to think about your dependencies.

Upvotes: 1

Related Questions