Reputation: 1222

Grunt include bower_components in usemin block

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

Upvotes: 13

Answers (4)

czerasz

Reputation: 14250

You can try this:

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

See this issue for more details

Upvotes: 0

christang

Reputation: 533

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.

Upvotes: 9

Marçal Juan

Reputation: 1342

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.

Upvotes: 10

eqot

Reputation: 671

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 . 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?).

Upvotes: 8

Grunt include bower_components in usemin block

Answers (4)

Related Questions