bower에서 중개자 이미지/글꼴

Question

중매인과 함께 bower 패키지의 & 글꼴을 사용하는 것이 가장 좋은 방법인지 궁금합니다. 예를 들어, slick.js 회전식 슬라이드 쇼를 프로젝트에 추가하려고합니다. 그것은 bower 코드에 css, js, 이미지 및 글꼴을 포함하고 있습니다.

중매인과 나는 bower_components 디렉토리를 스프로킷 및 나침반 경로에 추가하여 scss 및 js 파일이 올바로 컴파일되고 올바르게 작동하도록 설정했습니다.

하지만 이미지와 글꼴은 사용되는 곳 어디에도 놓이지 않습니다. slick.js 라이브러리는 scss를 사용하며 나침반 image-url 및 font-url 기능이있는 경우이 기능을 사용하도록 설정되었습니다. 즉, bower_components 디렉토리의 자산을 내 자신의 모든 이미지 및 글꼴과 동일한 위치에서 제공받을 필요가 있다는 것을 의미합니다. 그리고 빌드를 실행할 때뿐만 아니라 개발 middleman server 모드에서 작동하는 방식으로.

어떻게하면됩니까?

분명히 가능한 해결책은 내 코드에 직접 slick.js 라이브러리를 공급하거나 이미 호스팅 된 cdn에서 패키지를 포함하고 내 단일 css 및 js 파일로 컴파일하지 않는 것에 대해 걱정하지 않는 것입니다. 어느 쪽이든 괜찮 으면 좋겠지 만 일반적인 경우에 대해 궁금해합니다. 분명히 이것은 bower와 middleman을 사용하는 모든 사람들에게 일반적인 시나리오입니다.

Answer 1

나도 알아 냈어. 나침반은 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"} 

Answer 2

나는 쓸데없는 소리를 사용하지만 동일한 문제입니다. 일반적으로 다음과 같은 옵션이 있습니다 :

- 소스 제어에 바로 들어가고 거기에서 리소스를 참조하십시오 (특히 빌드를 수행 할 때 외부가 다운 된 경우 다소 권장 됨). URL에 bower_components를 표시하지 않으려면 bower_components 폴더로 연결되는 경로를 만드십시오.

지정된 경로에 빌드/중개자 실행 스크립트를 실행할 때 구성 요소를 복사하십시오. 이 옵션을 사용하여 체크인 할 리소스가 없으므로 코드에서 참조 할 대상을 선택하고 중개인에게 구성 요소를 복사 해 넣으십시오.