Адрес изображения в шаблонах ember grunt build

Я использовал Yeoman для создания веб-приложения в EmberJS. Все работает нормально, но после использования команды grunt build, если я просматриваю встроенное приложение в браузере (из каталога dist), я вижу, что некоторые изображения отсутствуют, потому что путь src неверен.Адрес изображения в шаблонах ember grunt build

Grunt меняет имена всех изображений в папке «образ», но не обновляет пути в своем HTML. Он обновляет путь только в css-файлах; изображения в файлах шаблонов .hbs по-прежнему имеют старый путь (со старым именем изображения) ...

Кто-нибудь знает, как это исправить?

источник

2013-07-22 Cereal Killer

Наконец я избавилась от этого:

все, что необходимо, чтобы изменить Gruntfile.js в корне проекта; задачей rev является та, которая управляет переименованием изображений; как правило, это что-то вроде этого:

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

Вы просто должны удалить строку, сказать ему, чтобы обработать папку с изображениями:

rev: { 
     dist: { 
      files: { 
       src: [ 
        '<%= yeoman.dist %>/scripts/{,*/}*.js', 
        '<%= yeoman.dist %>/styles/{,*/}*.css', 
        '<%= yeoman.dist %>/styles/fonts/*' 
       ] 
      } 
     } 
    },

И это делается; все изображения будут содержать свои оригинальные имена, поэтому ни один из путей не будет обновлен в файлах css, html или hbs ... Обратите внимание, что задача rev отвечает только за переименование файлов, а не за сжатие (для изображений это выполняется с помощью задачи imagemin), и поэтому изображения будут сжиматься в любом случае ...

источник

2013-07-22 23:45:17

Спасибо! Я просто сражался с той же проблемой :) – whatyouhide

Я вижу то же самое, но это не решает проблему с корнем. У меня есть мнения для моего приложения AngularJS, где у меня есть изображения, и я надеюсь, что задача rev переименует пути в версии приложения каталога dist. Кто-нибудь знает, как заставить задачу rev работать с шаблонами/представлениями? – Swaraj

@Swaraj, в моей задаче usemin, я изменил 'html: ['<% = yeoman.dist%>/{, * /} *. Html']' to 'html: ['<% = yeoman.dist%> /{,*/}*.html ',' <% = yeoman.dist%>/views/{, * /} *. html '] ', который, казалось, сделал трюк. – ozandlb

FWIW, я считаю, что автор rev утомляется чем-то здесь: они утверждают, что изображения должны быть включены в качестве фонов CSS, а не через img теги. Итак, если ваши шаблоны и представления получают все их изображения таким образом, у вас не будет никаких проблем.

ИМХО, это довольно хорошее соглашение для подражания. Делайте все с фоновыми изображениями, и проблема должна быть решена во всем приложении.

источник

2013-12-06 20:50:19 XML

пятно на, я переместил изображение src на css фоновые изображения, а задача rev обработала его, как ожидалось. –

Вы можете преобразовать URL изображения в уголек скомпилированный шаблон JS ... вот пример конфигурации usemin, что делает это:

usemin: { 
     html: ['<%= yeoman.dist %>/{,*/}*.html'], 
     css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
     options: { 
      assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/css'], 
      // The next pattern renames images within ember templates 
      patterns: { 
       js: [[/src=['"]([^"']+)["']/gm, 'Update the ember templates JS to reference our revved images']] 
      } 
     }, 
     js: ['<%= yeoman.dist %>/scripts/*.templates.js'] 
    }

источник

2013-12-09 09:38:45

это не работает для меня на ember-generator v0.8. error '' 'Обработка как JS-dist/scripts/7sd9af.templates.js Предупреждение: undefined не является функцией''' –

Возможно, перейдите по https://github.com/yeoman/grunt-usemin#patterns и попытайтесь сделать простой пример работы ... может ли это быть более ранней версией usemin? –

@AndreasAndreou отличное решение! Это решает корень проблемы и должно быть отмечено как принятый ответ. +1 от меня! – jedmao

Попробуйте это:

usemin: { 
      html: ['<%= yeoman.dist %>/**/*.html'], 
      css: ['<%= yeoman.dist %>/styles/{,*/}*.css'], 
      js: ['<%= yeoman.dist %>/scripts/**/*.js'], 
      options: { 
       dirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'], 
       assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'], 
       patterns: { 
        js: [ 
         [/["']([^:"']+\.(?:png|gif|jpe?g))["']/img, 'Image replacement in js files'] 
        ] 
       } 
      } 
     }

Отсюда: Grunt plugin for assets versioning

Regex glob проверяет, в отличие от другого решения, показанного здесь.

Также откат к потребительной мин 2.1.1 НПХ установок [email protected] --save-DEV

Хотя, я думаю, что «assetsDirs», а не просто «» вызывает директории неопределенный ошибка функции?

источник

2015-04-15 19:23:49

Адрес изображения в шаблонах ember grunt build

ответ

Смежные вопросы