Grunt在usemin块中包含bower_components

Question

我的index.html页面中有以下块..

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

css文件在我的应用程序结构中正确存在，但是当我运行'grunt build'时，只有styles / main.css中的CSS包含在生成的styles / style.css文件中。

我想我需要告诉Grunt在bower_components目录中查找CSS文件？但我不确定该怎么做？

我的gruntfile.js副本......

    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

我已经在HTML中解决了这个问题：

    <!-- 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 -->

您只需生成两个文件，一个在您的app/css文件夹外部使用“外部”css，另一个使用您的应用CSS。

使用此解决方案，您无需触摸Gruntfile.js。

希望它有所帮助。

Answer 2

Yeoman versions later than 0.9.0的Angular生成器使用grunt-wiredep自动将bower依赖项注入app / index.html。 wiredep查看bower_components中每个依赖项的bower.json配置，并根据主要属性将href添加到app / index。

例如，您可能对bower.json文件具有jquery-ui依赖关系，如下所示：

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

然后当你运行grunt时，wiredep会自动注入＆＃34; jquery-ui.js＆＃34;进入你的app / index.html文件。 NEATO！

问题在于它可能缺少依赖关系。如果您使用bower来管理bower_components目录，那么您不想更改bower_components / jquery-ui中的bower.json文件，因为如果您需要重建依赖项，将会删除任何更改。

相反，您可以覆盖应用bower.json中的主要属性。相反，您可以使用bower overrides：

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

这使您可以在自己的应用配置中保持项目特定的覆盖位置。

Answer 3

这是解决方案之一。

copy: {

  ...

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

问题是由于.tmp目录下不存在normalize.css，尽管index.html文件显示为<!-- build:css(.tmp) styles/style.css -->。 因此，您需要将CSS文件（实际上是上述案例中bower_components目录下的所有CSS文件）复制到.tmp目录。

或者，您可以在styles / main.css（或main.scss？）中使用@import语句。

Answer 4

你可以试试这个：

<!-- 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 -->

有关详细信息，请参阅this issue