Grunt include bower_components in usemin block

Question

I have the following block in my index.html page..

<!-- build:css(.tmp) styles/style.css -->
    <link rel="stylesheet" href="bower_components/normalize-css/normalize.css">
    <link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->

The css files exist correctly in my app structure, but when I run 'grunt build' only the CSS from styles/main.css is included in the resulting styles/style.css file.

I assume I need to tell Grunt to look in the bower_components directory for CSS files? But I'm unsure how to do this?

A copy of my gruntfile.js below...

    grunt.initConfig({
      yeoman: yeomanConfig,
      watch: {
        styles: {
          files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
          tasks: ['copy:styles', 'autoprefixer']
        },
        livereload: {
          options: {
            livereload: LIVERELOAD_PORT
          },
          files: [
            '<%= yeoman.app %>/{,*/}*.html',
            '.tmp/styles/{,*/}*.css',
            '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js',
            '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
          ]
        }
      },
      autoprefixer: {
        options: ['last 1 version'],
        dist: {
          files: [{
            expand: true,
            cwd: '.tmp/styles/',
            src: '{,*/}*.css',
            dest: '.tmp/styles/'
          }]
        }
      },
      connect: {
        options: {
          port: 9000,
          hostname: 'localhost'
        },
        livereload: {
          options: {
            middleware: function (connect) {
              return [
                lrSnippet,
                mountFolder(connect, '.tmp'),
                mountFolder(connect, yeomanConfig.app)
              ];
            }
          }
        },
        test: {
          options: {
            middleware: function (connect) {
              return [
                mountFolder(connect, '.tmp'),
                mountFolder(connect, 'test')
              ];
            }
          }
        },
        dist: {
          options: {
            middleware: function (connect) {
              return [
                mountFolder(connect, yeomanConfig.dist)
              ];
            }
          }
        }
      },
      open: {
        server: {
          url: 'http://localhost:<%= connect.options.port %>'
        }
      },
      clean: {
        dist: {
          files: [{
            dot: true,
            src: [
              '.tmp',
              '<%= yeoman.dist %>/*',
              '!<%= yeoman.dist %>/.git*'
            ]
          }]
        },
        server: '.tmp'
      },
      jshint: {
        options: {
          jshintrc: '.jshintrc'
        },
        all: [
          'Gruntfile.js',
          '<%= yeoman.app %>/scripts/{,*/}*.js'
        ]
      },
      rev: {
        dist: {
          files: {
            src: [
              '<%= yeoman.dist %>/scripts/{,*/}*.js',
              '<%= yeoman.dist %>/styles/{,*/}*.css',
              '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}',
              '<%= yeoman.dist %>/styles/fonts/*'
            ]
          }
        }
      },
      useminPrepare: {
        html: '<%= yeoman.app %>/index.html',
        options: {
          dest: '<%= yeoman.dist %>'
        }
      },
      usemin: {
        html: ['<%= yeoman.dist %>/{,*/}*.html'],
        css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
        options: {
          dirs: ['<%= yeoman.dist %>']
        }
      },
      imagemin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/images',
            src: '{,*/}*.{png,jpg,jpeg}',
            dest: '<%= yeoman.dist %>/images'
          }]
        }
      },
      svgmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>/images',
            src: '{,*/}*.svg',
            dest: '<%= yeoman.dist %>/images'
          }]
        }
      },
      cssmin: {

      },
      htmlmin: {
        dist: {
          options: {

          },
          files: [{
            expand: true,
            cwd: '<%= yeoman.app %>',
            src: ['*.html', 'views/*.html'],
            dest: '<%= yeoman.dist %>'
          }]
        }
      },
      // Put files not handled in other tasks here
      copy: {
        dist: {
          files: [{
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>',
            dest: '<%= yeoman.dist %>',
            src: [
              '*.{ico,png,txt}',
              '.htaccess',
              'bower_components/**/*',
              'images/{,*/}*.{gif,webp}',
              'styles/fonts/*'
            ]
          }, {
            expand: true,
            cwd: '.tmp/images',
            dest: '<%= yeoman.dist %>/images',
            src: [
              'generated/*'
            ]
          }]
        },
        styles: {
          expand: true,
          cwd: '<%= yeoman.app %>/styles',
          dest: '.tmp/styles/',
          src: '{,*/}*.css'
        }
      },
      concurrent: {
        server: [
          'copy:styles'
        ],
        test: [
          'copy:styles'
        ],
        dist: [
          'copy:styles',
          'imagemin',
          'svgmin',
          'htmlmin'
        ]
      },
      karma: {
        unit: {
          configFile: 'karma.conf.js',
          singleRun: true
        }
      },
      cdnify: {
        dist: {
          html: ['<%= yeoman.dist %>/*.html']
        }
      },
      ngmin: {
        dist: {
          files: [{
            expand: true,
            cwd: '<%= yeoman.dist %>/scripts',
            src: '*.js',
            dest: '<%= yeoman.dist %>/scripts'
          }]
        }
      },
      uglify: {
        dist: {
          files: {
            '<%= yeoman.dist %>/scripts/scripts.js': [
              '<%= yeoman.dist %>/scripts/scripts.js'
            ]
          }
        }
      }
    });

Answer 1

I've solved this in the HTML itself:

    <!-- build:css styles/modules.css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
    <link rel="stylesheet" href="bower_components/animate.css/animate.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="not_bower/foo/plugin.css">
    <!-- endbuild -->

    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->

You just have to generate two files, one with "external" css outside your app/css folder, and another with your app CSS.

With this solution you don't have to touch Gruntfile.js.

Hope it helps.

Answer 2

Yeoman Angular generators for versions later than 0.9.0 use grunt-wiredep to automate injecting bower dependencies into app/index.html. wiredep looks at the bower.json configurations of each of your dependencies in bower_components and adds hrefs to app/index based on the main property.

For instance, you might have a jquery-ui dependency with a bower.json file that looks like this:

{
  "name": "jquery-ui",
  "version": "1.11.1",
  "main": [
    "jquery-ui.js"
  ], ...
}

Then when you run grunt, wiredep will auto-inject "jquery-ui.js" into your app/index.html file. Neato!

The problem is that it could be missing a dependency. If you use bower to manage your bower_components directory, you don't want to change the bower.json file in bower_components/jquery-ui since any changes will be wiped if you ever need to rebuild your dependencies.

Instead, you can override the main property in your app bower.json. Instead, you can use bower overrides:

  "overrides": {
    "jquery-ui": {
      "main": [
        "jquery-ui.js",
        "this/was/missing/jquery-ui.css"
      ]
    }
  }

This lets you keep your project specific overrides where they belong, in your own app configuration.

Answer 3

Here is one of solutions.

copy: {

  ...

  styles: {
    expand: true,
    cwd: '<%= yeoman.app %>',
    dest: '.tmp/',
    src: [
      'styles/{,*/}*.css',
      'bower_components/**/*.css'
    ]
  }

The problem is caused beause normalize.css does not exist under .tmp directory, although index.html file says <!-- build:css(.tmp) styles/style.css -->. So you need to copy the CSS file (actually all CSS files under bower_components directory in the above case) to .tmp directory.

Alternatively, you can use @import statement in styles/main.css (or main.scss?).