Где добавить css файлы, используя рабочий процесс Yeoman

У меня есть установка angular с помощью Yeoman. Под моим main.html (представление, загруженное в index.html), я добавил ссылочный файл css в папку стилей.

Я окружил его комментариями сборки, чтобы его можно было схватить, хрустнув при минимизации:

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

Он не смотрит в каталог представлений. Я подозреваю, что я неправильно использую рабочий процесс.

Как включить файл css, специфичный для представления? Кроме того, что означают комментарии в блоке cssmin? Спасибо!

Ответы

Ответ 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'
    ]
},

Woot woot! Что это!

Сообщите мне, если вы застряли где-нибудь!