Активы отсутствуют в приложении Angular, построенном с использованием grunt

Я создал приложение, использующее Yeoman и AngularJS (и все, что с ним связано, как Grunt и Bower).

Все работает отлично, когда выполняется локально с помощью grunt serve. Однако после запуска grunt и развертывания приложения есть несколько недостающих активов, и я не уверен, что лучший способ его решить.

Во-первых, запуск Grunt, похоже, копирует изображения на dist, но переименовывает их без корректировки ссылок в CSS. app/images/uparrow.png становится dist/images/3f84644a.uparrow.png.

Вот строка из main.scss:

.table.sortable th.sorted-asc        { background-image: url(../images/uparrow.png); }

Когда он компилируется в CSS во время процесса сборки, он не переписывает путь, поэтому браузер пытается загрузить dist/images/uparrow.png, который отсутствует.

Во-вторых, возникает проблема с загрузкой шрифтов для модуля Bootstrap. Загрузочный CSS в app/bower_components/bootstrap/dist/css/bootstrap.css ссылки ../fonts/glyphicons-halflings-regular.woff. Относительный путь разрешается до app/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof и работает отлично.

Как только построено, поставщик CSS объединяется и минимизируется в один файл CSS в dist/styles/8727a602.vendor.css. Относительный путь к шрифту не переписывается. Поэтому он пытается искать шрифты в папке dist/fonts, а не dist/bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.wof, где файл фактически есть.

Любые советы очень ценятся.

Ответ 1

Вы столкнулись с ошибками Йомана с задачей build, которая еще не исправлена. Я считаю, что нет чистых решений, поэтому мы предлагаем несколько обходных решений.

Во-первых, изображение rev:

Просто удалите изображения из задачи rev, и вам будет хорошо идти.

rev: {
  dist: {
    files: {
      src: [
        '<%= yeoman.dist %>/scripts/{,*/}*.js',
        '<%= yeoman.dist %>/styles/{,*/}*.css',
        // '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', <- remove that line
        '<%= yeoman.dist %>/styles/fonts/*'
      ]
    }
  }
},

Во-вторых, шрифты bootstrap-sass не копируются в папку dist. Я потратил часы на эту ошибку и не смог найти правильное решение. Наконец, я решил добавить новое правило в задачу copy:

copy: {
  dist: {
    files: [{
      // your existing rules...
    },
    // add this rule to copy the fonts:
    {
      expand: true,
      flatten: true,
      cwd: '<%= yeoman.app %>',
      dest: '<%= yeoman.dist %>/fonts',
      src: ['bower_components/sass-bootstrap/fonts/*.*']
    }]
  },
  ...
}

Запустите grunt build снова после этих изменений и он должен работать.

Ответ 2

Я нашел аккуратное решение проблемы CSS - SCSS имеет встроенные функции для изображений, и это автоматически переписывает пути к активам:

.table.sortable th.sorted-asc        { background-image: image-url('uparrow.png'); }

Ответ 3

cssmin с корневой опцией заменяет все относительные пути.

вы можете деактивировать корневую опцию cssmin в файле Gruntfile.js

cssmin: {
  options: {
    //root: '<%= yeoman.app %>'
  }
},

Ответ 4

У меня была точно такая же проблема, и я решил ее:

1. Добавьте к задаче копирования (внутри gruntfile) начальные шрифты:

{
expand: true,
cwd: ‘src/main/webapp/bower_components/bootstrap/dist,
 src: ‘fonts/*,
 dest: ‘<%= yeoman.dist %>/assets/
}

Это скопирует загрузочные шрифты в вашу папку dist/assests/fonts.

2. Удалите задачу cssmin или закомментируйте корневой параметр. Это должно решить вашу проблему в отношении путей.

Для получения дополнительной информации, проверьте этот пост, который включает в себя глубокое объяснение: