13

我的 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”时,生成的样式/style.css 文件中仅包含来自 styles/main.css 的 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'
            ]
          }
        }
      }
    });
4

4 回答 4

10

我已经在 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 -->

您只需要生成两个文件,一个在您的文件夹之外带有“外部”css app/css,另一个带有您的应用程序 CSS。

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

希望能帮助到你。

于 2013-11-28T19:27:11.050 回答
9

Yeoman Angular 0.9.0 以上版本的生成器使用grunt-wiredep自动将 bower 依赖项注入 app/index.html。wiredep 查看 bower_components 中每个依赖项的 bower.json 配置,并根据 main 属性将 href 添加到 app/index。

例如,您可能有一个 jquery-ui 依赖项,其中的 bower.json 文件如下所示:

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

然后当你运行 grunt 时,wiredep 会自动将“jquery-ui.js”注入到你的 app/index.html 文件中。尼托!

问题是它可能缺少依赖项。如果您使用 bower 来管理 bower_components 目录,则不想更改 bower_components/jquery-ui 中的 bower.json 文件,因为如果您需要重建依赖项,任何更改都将被擦除。

相反,您可以覆盖应用程序 bower.json 中的主要属性。相反,您可以使用凉亭覆盖

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

这使您可以在自己的应用程序配置中将项目特定的覆盖保留在它们所属的位置。

于 2014-09-08T01:43:06.937 回答
8

这是解决方案之一。

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 目录下。

或者,您可以@import在 styles/main.css(或 main.scss?)中使用语句。

于 2013-09-14T00:19:55.003 回答
0

你可以试试这个:

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

有关更多详细信息,请参阅此问题

于 2015-05-21T13:06:51.670 回答