9

我有一个使用 Yeoman 的角度设置。在我的main.html（加载到 index.html 上的视图）下，我在我的样式文件夹中添加了一个引用的 css 文件。

我用构建注释包围了它，以便它可以被 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 中。

从我的咕噜声文件中：

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'
  //     ]
  //   }
  // }
},

它不查看视图目录中的内容。我怀疑我错误地使用了工作流程。

如何包含特定于视图的 css 文件？另外，cssmin 块中的注释是什么意思？谢谢！

4

1 回答 1

5

我有答案了！

中需要更多配置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在你的东西被复制之前运行，它也需要知道 views 目录。

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

呜呜呜！而已！

如果您在任何地方卡住，请告诉我！

于 2013-08-12T00:12:42.227 回答