Middleman изображения / шрифты от Bower

Мне интересно, как лучше всего использовать изображения и шрифты из пакетов Bower с посредником. Например, я пытаюсь добавить карусель slick.js в свой проект. Это на бауэре и включает в себя код CSS, JS, изображения и шрифты.

С помощью middleman у меня есть настройки, в которых я добавил каталог bower_components в путь для звездочек и компаса, поэтому файлы scss и js компилируются правильно и работают нормально.

Но изображения и шрифты не помещаются туда, где они будут использоваться. Библиотека slick.js использует scss и настроена на использование компаса image-url а также font-url функции, если они существуют, то есть мне нужно как-то получить ресурсы из каталога bower_components для обслуживания из того же места, что и все мои собственные изображения и шрифты, и таким образом, чтобы это работало как в разработке middleman server режим, а также при запуске сборки.

Как мне это сделать?

Очевидно, что возможные решения - это просто внедрить библиотеку slick.js прямо в мой код или включить ее из cdn, где она уже размещена, и не беспокоиться о том, что она не будет скомпилирована в мои отдельные файлы css и js. Любой из них может работать нормально, но мне интересно общее дело, конечно, это обычный сценарий для всех, кто использует беседу и посредника.

2 ответа

Решение

Я понял это - я думал, что компас был необходим для scss-файлов и звездочек только для js, но посредник также использует звездочки (middleman-sprockets библиотека) для копирования произвольных статических активов.

Это немного вручную и многословно (если бы файлов было намного больше, посредник предложил бы написать скрипт для автоматического обнаружения их по типам расширений и импорта их), но мое решение заключается в том, чтобы включить в config.rb файл:

# set local vars I'll need to access later
images_dir = 'images'

set :images_dir, images_dir

# ... other config 

sprockets.import_asset('slick-carousel/slick/ajax-loader.gif') {|p| "#{images_dir}/ajax-loader.gif"}

Я использую хрюканье, но это та же проблема. Обычно у вас есть следующие варианты:

-Передайте то, что вам нужно, в каталоге bower_components прямо для управления исходным кодом и ссылки на ваши ресурсы оттуда (несколько рекомендуется, особенно если что-то внешнее не работает, когда вы делаете сборку), или если вам не нравится выставлять bower_components в URL, создайте маршрут, который направляет в вашу папку bower_components

-Копировать компоненты при выполнении скрипта build / middleman по указанному пути. Не будет ресурсов для регистрации этой опции, вы просто выбираете место назначения для ссылки в своем коде и попросите посредника скопировать ваши компоненты туда.

Другие вопросы по тегам