Как вы включаете изображения в состав директив AngularJS?
Собственно, небольшие изображения через Data URL, это да. Но вот у меня сейчас в работе директива, у которой много элементов пользовательского UI реализовано растровыми бэкгранудами. Пихать почти пол метра в Data URL не хочется, есть статьи, что существенно страдает производительности при первичном отображении (декодировании base64).
И, существенная деталь: сборка галпом идёт. Все js-исходники (контроллеры, директивы и пр.) склеиваются в одни js-файл.
Аналогично, все css директив приклеиваются к оснвоному css-файлу.
Как лучше поступить в таком случае с изображениями, чтобы автоматизировать максимально гибко, без лишних прописываний путей.
Кстати, этот же вопрос актуален, если использовать templateURL в директивах, но я пока обхожуст просто строкой в js.
ИМХО: пути основных папок должны быть прописаны в константы, соответственно на выходе или хелпер или константа + путь к файлу, или же в less sass это переменная пути до папки с фонами как в вашем случае.
DataUri только для элементов интерфейса (и желательно в векторе), не надо пихать туда все подряд.
Разумеется, что в dataurl только интерфейсные элементы. Насчёт вектора не соглашусь - важен размер, а не формат. Просто обычно вектор меньше. В моём случае нужен именно растр и, к сожалению, размеры файлов большие, поскольку спрайты ориентированы под "ретину".
Насчёт хелпера не уловил суть. Например, я могу прописать в галпе копирование папки с директивами в дистрибутивную и удаление оттуда js-файлов (поскольку склеиваются они в основной js-файл). И тогда в директивах ссылаться на ресурсы по пути типа /directives/{directive_name}/assets/, относительно корня хоста.
Павел Китьян: не вижу большого смысла класть фоны в папку конкретной директивы (возможно просто я вас не понимаю в конкретной ситуации).
Если вы хотите решить именно этот вопрос - могу предложить воспользоватся чем то наподобие webpack loader: 'url-loader?limit=30000 , где есть лимит на загружаемые файлы, а так же пробегаться по папкам ваших директив в поисках картинок для оптимизации и складывании их в соответствующие папки директории dist/.
Ваша проблема наверно от части потому, что у вас не настроен оптимизатор картинок.
Так же нужно ничего напрямую копировать, вставлять в css нужно файлы так же из папки dist, так как они будут уже оптимизированы или как написал выше пользоваться loader, ссылки на них воткнет fallback'ом сам сборщик.
SerzN1: Как же нет смысла класть фоны директивы в её папку? Директива со всеми её фонами UI-шными используется в нескольких SPA. Разработка директвы ведётся отдельно, с отдельной git репой.
Поэтому как бы логично, что все ресурсы директивы должны быть как-то увязаны в одном месте изначально. Видимо потом, при сборке SPA галпом, надо распихивать. Вот тут мне и хотелось максимально автоматизировать процесс.
Может быть стоит отказаться в таком случае от склейки этой директивы в app.js и подключать отдельно её html-файл? И инджектить зависимость от директивы в приложение, а не объявлять директиву частью приложения?
Средний
