如何在 Grunt/Gulp/Webpack 中使用 Bower 中的图像和字体连接 css 文件

Question

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.

Answer 1

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.

Answer 2

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/'));
});