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 по указанному пути. Не будет ресурсов для регистрации этой опции, вы просто выбираете место назначения для ссылки в своем коде и попросите посредника скопировать ваши компоненты туда.