Grunt bower_concat not adding css

Question

I try to compile all my css from my bower_components using bower_concat https://github.com/sapegin/grunt-bower-concat. The js compiles 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?

Answer 1

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.

Answer 2

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'
    }
  }
}

Answer 3

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.

Answer 4

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_components"]
        },
        //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.com/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 command line
    grunt.registerTask('build', [
        'bower_install', 'build_css', 'build_js'
    ]);
    grunt.registerTask('default', ['build']);

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

};