Делаю тестовый проект с целью изучения
gulp и его модулей,
bowerи т.д.
Никак не могу понять, как правильно организовать структуру проекта в том случае, если необходимо скопировать основные файлы компонента из
/bower_components в папку, куда собирается проект (
/dist), в папку, скажем,
assets
После определенного времени, проведенного с Google, подключил
main-bower-files, который и копирует основные файлы компонента из
/bower_components в
/dist/assets
Но это не совсем то, что хотелось бы.
Ведь тогда, в файле, допустим,
/src/index.html необходимо было бы прописывать пути к компонентам, установленным с помощью bower ручками...
Еще немного времени проведенного за поисками привели меня к пакету
gulp-wiredep
Тут уже приятней, просто вставив в нужное место следующий код
<!-- bower:css -->
<!-- endbower -->
и выполнив задачу с
wiredep на выходе получается, например
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" />
Но меня смущает путь к файлу
../bower_compontents/bla-bla-bla/etc. Смущает тем, что
bower_compontens находится вне папки
dist, все-таки, хотелось бы чтобы после сборки, все необходимые файлы лежали в
/dist и не было возни с путями.
И еще немного погуглив нашел компонент
gulp-useref. С его помощью, все подключенные файлы внутри следующих комментариев:
<!-- build:css css/vendor.css-->
<!-- include css files here -->
<!-- endbuild -->
будут объеденены в один файл
vendor.css и помещены в папку
css
Итак, к чему я пришел.
1.
main-bower-files копирует основные файлы компонента в, например,
/dist/assets/font-awesome
2.
wiredep прописывает пути к основным файлам компонента в
html файл
3.
useref объеденяет файлы и прописывает путь в
html к сгенерированому файлу
Но и тут не все так гладко... После того, как
useref объеденит файлы, пути внутри этих файлов становятся не валидными. Например, после
<!-- build:css css/vendor.css-->
<link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.min.css" />
<!-- endbuild -->
В папке
/dist/css будет находится файл
vendor.css, в котором пути до шрифтов будут выглядеть следующим образом:
@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.6.3')...
Хотя шрифты, в действительности, будут находится в
/dist/assets/font-awesome/fonts или на худой случай в
../bower_components/font-awesome/fonts
В общем, никак не могу найти правильное решение этой задачи. Хотелось бы и чтобы пути в html автоматически прописывались, и файлы конкатенировались, и в папке
dist мусора не было.
Буду рад любым подсазкам и любой помощи.
На данный момент структура проекта выглядит так:
Приношу свои извинения за возможную избыточность в объяснениях и за количество текста.
Заранее спасибо
Простой
