I try to pile all my css from my bower_ponents using bower_concat . The js piles fine but the css never gets created. Here is my grunt file code for this section:

  bower_concat: {
            all: {
                dest: '<%= pkg.dist_dir %>/lib/_bower.js',
                cssDest: '<%= pkg.dist_dir %>/lib/_bower.css',
                dependencies: {
                    // 'angular': ''
                },
                exclude: [
                    'jquery'
                ],
                bowerOptions: {
                    relative: false
                },
                includeDev: true
            }
        },

It never creates "_bower.css". Why is not working as it should?

I try to pile all my css from my bower_ponents using bower_concat https://github./sapegin/grunt-bower-concat. The js piles fine but the css never gets created. Here is my grunt file code for this section:

  bower_concat: {
            all: {
                dest: '<%= pkg.dist_dir %>/lib/_bower.js',
                cssDest: '<%= pkg.dist_dir %>/lib/_bower.css',
                dependencies: {
                    // 'angular': ''
                },
                exclude: [
                    'jquery'
                ],
                bowerOptions: {
                    relative: false
                },
                includeDev: true
            }
        },

It never creates "_bower.css". Why is not working as it should?

• javascript
• gruntjs
• bower

• I'm having the same problem (I'm totally new to grunt and bower.) Did you ever figure this out? – GMA Commented Jan 7, 2016 at 16:53
• So I ended up rewriting my Gruntfile from scratch I will post it as an answer to see if it helps you. – ecorvo Commented Jan 7, 2016 at 19:48
• see my answer and LMK if it works for you – ecorvo Commented Jan 7, 2016 at 20:16

4 Answers 4

grunt-bower-concat (and grunt-wiredep as well) work on the concept of bundling together files mentioned in the main field of the bower.json of the respective package.

Initially there wasn't any specification which defined what should be included in main field of the bower.json file. It was solely up to the package creator to make this choice. Then Define main as the entry-point files, one-per-filetype came (This lead to known libraries like Bootstrap and Font Awesome removing the CSS files from main field, rendering tools like grunt-bower-concat useless without manual override)

mainFiles: {
    package: [ 'path/to/its/file.css' ]
}

Therefore a probable cause of the issue you are facing would be related to the fact that the main field of the bower package that you trying to include doesn't reference the CSS files.

I fixed it according to the config example at the bottom of the page, that is instead adding the destinations in the all parameter, creating the dest parameter and setting js/css destinations individually:

bower_concat: {
  all: {
    dest: {
      'js': 'build/_bower.js',
      'css': 'build/_bower.css'
    }
  }
}

As of release 1.0.0, there is a new API and cssDest has been removed:

Concatenation of any file types

The new API looks like this:

bower_concat: {
    main: {
        dest: {
            js: 'build/_bower.js',
            scss: 'build/_bower.scss',
            coffee: 'build/_bower.coffee'
        },
        // ...
    }
}
The old dest as a string ({dest: 'build/_bower.js'}) is still working but the cssDest was removed.

See release notes here.

My issue was that I was missing one files in the css directory

1. pkg.name.less (This needs to match the package name defined in package.json) and needs to contains this: @import "auto_imports.less";

This basically includes the include auto generated by my grunt file (auto_imports.less) which has a bunch of includes (each .less file you might have in your app) And auto_imports.less

And also I needed to run this:

bower:        {
    install: {
        options: {
            cleanTargetDir: true,
            targetDir:      '<%= pkg.dist_dir %>/lib'
        }
    }
},

Before bower_concat so that it can get all the 3rd party libraries, and that is why bower_concat was not working for me at least for the css. I ended up re-writing the whole Gruntfile so if copy it, it should work fine. I made a template out of it for my future project lol

Here is the full Gruntfile.js, hopefully it makes sense when you look at it

module.exports = function (grunt) {
    require('time-grunt')(grunt);
    require('load-grunt-tasks')(grunt);
    grunt.initConfig({
        //define pkg object and point to package.json
        pkg:          grunt.file.readJSON('package.json'),
        //define notifications
        notify_hooks: {
            options: {
                enabled:                  true,
                max_jshint_notifications: 5, // maximum number of notifications from jshint output
                title:                    "<%= pkg.name %>", // defaults to the name in package.json, or will use project directory's name
                success:                  false, // whether successful grunt executions should be notified automatically
                duration:                 3 // the duration of notification in seconds, for `notify-send only
            }
        },
        notify:       {
            build: {
                options: {
                    title:   '<%= pkg.name %> Build',
                    message: 'Build Completed'
                }
            },
            js:    {
                options: {
                    message: 'Completed JS Build'
                }
            },
            css:   {
                options: {
                    message: 'Completed CSS Build'
                }
            },
            bower: {
                options: {
                    message: 'Completed Bower'
                }
            }
        },
        //define clean task
        clean:        {
            bower: ["<%= bower.install.options.targetDir %>", "bower_ponents"]
        },
        //define bower task
        bower:        {
            install: {
                options: {
                    cleanTargetDir: true,
                    targetDir:      '<%= pkg.dist_dir %>/lib'
                }
            }
        },
        bower_concat: {
            all: {
                dest:         '<%= pkg.dist_dir %>/lib/_bower.js',
                cssDest:      '<%= pkg.dist_dir %>/lib/_bower.css',
                bowerOptions: {
                    relative: false
                },
                dependencies: {
                    'angular':    ['jquery', 'moment'],
                    'datePicker': ['moment']
                },
                mainFiles: {
                  'ng-flags': 'src/directives/ng-flags.js'
                },
                includeDev:   true
            }
        },
        //define concat task to concat all js files
        concat:       {
            js: {
                options: {
                    separator: '\n'
                },
                src:     [
                    'js/app/app.js', 'js/**/*.js'
                ],
                dest:    '<%= pkg.dist_dir %>/<%= pkg.name %>.js'
            }
        },
        uglify:       {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n',
                mangle: false
            },
            js:      {
                files: {
                    '<%= pkg.dist_dir %>/<%= pkg.name %>.min.js': ['<%= concat.js.dest %>']
                }
            }
        },
        jshint:       {
            files:   ['Gruntfile.js', 'js/**/*.js', '!js/lib/*.js'],
            options: {
                globals: {
                    jQuery:  true,
                    console: true,
                    module:  true
                }
            }
        },
        //define less task
        less:         {
            all: {
                options: {
                    paths: ["css"]
                },
                files:   {
                    "<%= pkg.dist_dir %>/<%= pkg.name %>.css": "css/<%= pkg.name %>.less"
                }
            }
        },
        less_imports: {
            options: {
                inlineCSS: false
            },
            all:     {
                src:  [ 'css/**/*.less', '!<%= less_imports.all.dest %>', '!css/<%= pkg.name %>.less'],
                dest: 'css/auto_imports.less'
            }
        },
        //define the watch task. (documented at https://github./gruntjs/grunt-contrib-watch)
        watch:        {
            js:         {
                files: ['<%= concat.js.src %>'],
                tasks: ['build_js']
            },
            css:        {
                files: ['css/**/*.less'],
                tasks: ['build_css']
            },
            grunt_file: {
                files: ['Gruntfile.js'],
                tasks: ['build']
            }
        }
    });

    //bower tasks
    grunt.registerTask('bower_install', [ 'clean:bower', 'bower', 'bower_concat', 'notify:bower']);

    grunt.registerTask('build_css', ['less_imports', 'less', 'notify:css']);
    grunt.registerTask('build_js', ['jshint', 'concat:js', 'uglify:js', 'notify:js']);

    // the default task can be run just by typing "grunt" on the mand line
    grunt.registerTask('build', [
        'bower_install', 'build_css', 'build_js'
    ]);
    grunt.registerTask('default', ['build']);

    // Start the notification task.
    grunt.task.run('notify_hooks');

};