Reputation: 419
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
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
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