Как к проекту подключить скачанный пакет например Bootstrap и автоматически подключить все необходимые файлы?

Question

[emptinessandform]

Добрый день.
Я недавно начал пользоваться npm и собирать проект с помощью gulp, объединять все файлы и из sources перемещать все в build.
Но например если ты качаешь пакет по типу Bootstrap, то у него в стилях указанны пути на его иконки, естественно в build другая файловая структура и иконки лежат не там где указанны в bootstrap.css. Не ужели мне надо каждый рас в ручную заходить и менять путь к иконкам. Благо можно скачать sccs или less версию и там указать переменную. Но например я скачал FancyBox, а там нету scss/less в исходниках, а иконок много.

Как что бы из скачанного пакета в build попало самое нужное с сохранением путей?

Answer 1

[Vladimir Abiduev]

bower, да еще один менеджер.
Порог вхождения ниже чем у gulp.

Third Party ресурсы просто держите отдельно

.bowerrc

{
  "directory": "build/components/",
}

$ bower init
$ bower install --save-dev bootstrap

Ну и побочный usecase, вся документация и исходники есть локально. Не надо рыскать и искать сайт с документацией и прочим.
Проблема - бывает приходится заходить в компоненты и собирать компонент, пока всего два раза. Но и использую я его неделю.

Comments

[emptinessandform]

так что просто держать их в другой папке и не надо все конкатенировать в один например css.main main.js? я занимался тем что раскидывал все по своим папочкам. Походу я неправильный подхожу к сборке.

[Vladimir Abiduev]

emptinessandform: вы и конкатеровать можете, но придется copy руками для всего бинарного. Ну а конкатенация, навскидку у вас есть js плагин для редактирования markdown, которая вызывается на одной вьюшке. Есть ли смысл тащить его в общий main.js? В любом случае помогает ускорить процесс разработки #машиныдолжныстрадать

[Vladimir Abiduev]

emptinessandform: еще можно делать bower update. И разруливать зависимости. Клево же.

Answer 2

[nofuture trustnoone]

4ое 5ое видео

Answer 3

[Alex]

Я использую gulp wiredep

gulp.task('wiredep', function () {
  var wiredep = require('wiredep').stream;
  gulp.src('./client/index.html')
    .pipe(wiredep({
    }))
    .pipe(gulp.dest('./client'));
});

и в .bowerrc

"scripts": {
		"postinstall": "gulp wiredep"
	}

В итоге после bower install -save в файле index.html уже есть все пути.