How to gulp and concatenate bower css files

Question

Using our gulp script, we want to create different compiled & minified css files for vendor (via bower, see screenshot) and custom styles. Our task for the vendor styles does not work as expected, though. We expected it to iterate through the bower_components, grab the css files, concatenate them, minify them and save the generated vendor.min.css to dist/styles. Said vendor.min.css is not generated, however. We tried commenting some of the .pipe() commands in the return statement and suspect that it might have something to do with the concat() function.

Bower components:

Parts of our gulpfile.js including the malfunctioning task:

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    debug = require('gulp-debug'),
    bower = require('gulp-main-bower-files'),
    uglify = require('gulp-uglify'),
    minify = require('gulp-clean-css'),
    filter = require('gulp-filter'),
    flatten = require('gulp-flatten'),
    autoprefix = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    del = require('del');

/**
 * Predefined file-type filters to use with gulp-filter
 */
var filters = {
  css: '**/*.css',
  js: '**/*.js',
  webFonts: ['**/*.otf','**/*.woff*', '**/*.woff2','**/*.ttf','**/*.eot','**/*.svg'],
  images: ['**/*.png','**/*.gif','**/*.jpg','**/*.svg'],
  movies: []
};

/**
 * concatVendorCSS
 * Create vendor.min.css from bower main files without bootstrap (as it is included in custom main.css)
 * no autoprefixing included: should be done by source package
 * scss-Files will be ignored - include them in /assets/styles/main.scss
 */
gulp.task('styles:vendor',['clean:vendor:styles'], function() {
    console.log('concatenating vendor css files and moving to dist...');
    var filterCSS = filter([filters.css], { restore: true });
    return gulp.src('bower.json')
        .pipe(bower())
        .pipe(filterCSS)
        .pipe(sourcemaps.init())
        .pipe(flatten())
        .pipe(concat('vendor.min.css'))
        .pipe(autoprefix(apConfig))
        .pipe(minify())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/styles/'));
});

bower.json file:

{
  "name": "ptype",
  "homepage": "-",
  "authors": [
    "..."
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "css-hamburgers": "^0.5.0",
    "bootstrap": "git://github.com/twbs/bootstrap.git#v4.0.0-alpha.6",
    "font-awesome": "fontawesome#^4.6.3",
    "jquery": "^3.2.1",
    "selectize": "^0.12.4",
    "swiper": "^4.0.6",
    "jquery-focuspoint": "^1.1.3"
  },
  "overrides": {
    "font-awesome": {
      "main": [
        "./fonts/FontAwesome.otf",
        "./fonts/fontawesome-webfont.eot",
        "./fonts/fontawesome-webfont.svg",
        "./fonts/fontawesome-webfont.ttf",
        "./fonts/fontawesome-webfont.woff",
        "./fonts/fontawesome-webfont.woff2",
        "./scss/font-awesome.scss"
      ]
    }
  }
}

score 1 · Accepted Answer · answered Nov 25 '17 at 13:50

You need to change the components that work together. Use 'main-bower-files' instead of 'gulp-main-bower-files' and exchange 'gulp-concat' with 'gulp-group-concat' to combine as shown below.

I left the double filter in order to get a nicer debug output.

 var gulp = require('gulp'),
    sass = require('gulp-sass'),
    groupConcat = require('gulp-group-concat'),
    concat = require('gulp-concat'),
    debug = require('gulp-debug'),
    bowerMain = require('main-bower-files'),
    uglify = require('gulp-uglify'),
    minify = require('gulp-clean-css'),
    filter = require('gulp-filter'),
    flatten = require('gulp-flatten'),
    autoprefix = require('gulp-autoprefixer'),
    sourcemaps = require('gulp-sourcemaps'),
    rename = require('gulp-rename'),
    imagemin = require('gulp-imagemin'),
    gutil = require('gulp-util'),
    del = require('del');

/**
 * concatVendorCSS
 * Create vendor.min.css from bower main files without bootstrap (as it is included in custom main.css)
 * no autoprefixing included: should be done by source package
 * scss-Files will be ignored - include them in /assets/styles/main.scss
 */
gulp.task('styles:vendor',['clean:vendor:styles'], function(){
    console.log('concatenating bower vendor css files into vendor.min.css and moving to ' + sassConfig.outputDirectory + '...');

  return gulp.src(bowerMain())
    .pipe( filter(filters.css) )
    .pipe( debug() )
    .pipe( sourcemaps.init() )
    .pipe( groupConcat( { 'vendor.min.css': filters.css } ) )
    .pipe( autoprefix(apConfig) )
    .pipe( minify() )
    .pipe( sourcemaps.write('./maps') )
    .pipe( gulp.dest('dist/styles/') );
});

How to gulp and concatenate bower css files

1 Answers1