在Yeoman工作流中添加CSS文件的位置在哪里？

Question

我有一个使用Yeoman的Angular设置。在我的main.html下（一个加载到index.html上的视图），我已经添加了一个引用样式文件的链接，该文件存储在我的styles文件夹中。

我使用了构建注释将其括起来，以便grunt在最小化时可以捕获它：

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

然而，当我使用grunt构建(使用基本的yeoman grunt配置)时，似乎没有创建calendar.css文件。我怀疑这是因为main.html文件位于views/main.html内。

从我的grunt文件中：

usemin: {
  html: ['<%= yeoman.dist %>/{,*/}*.html'],
  css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
  options: {
    dirs: ['<%= yeoman.dist %>']
  }
},

...

cssmin: {
  // By default, your `index.html` <!-- Usemin Block --> will take care of
  // minification. This option is pre-configured if you do not wish to use
  // Usemin blocks.
  // dist: {
  //   files: {
  //     '<%= yeoman.dist %>/styles/main.css': [
  //       '.tmp/styles/{,*/}*.css',
  //       '<%= yeoman.app %>/styles/{,*/}*.css'
  //     ]
  //   }
  // }
},

它没有在views目录中查找。我怀疑我使用工作流程不正确。

如何包含一个与视图特定的CSS文件？还有，cssmin块中的注释是什么意思？谢谢！

- Karan

Answer 1

我有答案！

如果您使用自定义工作流，则需要在Gruntfile.js中进行更多配置（如果已经完成这些操作则忽略此步骤）。

首先，复制任务需要更新以将您的app/views目录复制到dist/views。只需进行简单的修复即可：

copy: {
    dist: {
        files: [{
            expand: true,
            dot: true,
            cwd: '<%= yeoman.app %>',
            dest: '<%= yeoman.dist %>',
            src: [
                '*.{ico,png,txt}',
                '.htaccess',
                'images/{,*/}*.{webp,gif}',
                'styles/fonts/*',
                'views/*'
            ]
        }]
    },
    // ...
}

很好。现在，useminPrepare会在你的文件复制之前运行，需要知道关于视图目录的信息。

useminPrepare: {
    options: {
        dest: '<%= yeoman.dist %>'
    },
    html: [
        '<%= yeoman.app %>/index.html',
        '<%= yeoman.app %>/views/*.html'
    ]
},

哇塞！就是这样！

如果你在任何地方遇到问题，请告诉我！

- Stephen