Как подгрузить все нужные файлы из bower папки?

Question

Dark19 @Dark19

Как подгрузить все нужные файлы из bower папки?

Доброго времени суток. Пользуюсь bower + gulp. Когда загружаю через bower плагины, библиотеки... у которых только один главный файл в котором все, что нужно для разработки (например jquery.js, normalize.css) то все норм, я вытягиваю из папки (bower_components) эти файлы в свою папку для библиотек и дальше делаю с ними, что захочу. Но вот например я загрузил bootstrap 4 и там в bower.json прописаны эти файлы:

"main": [
    "scss/bootstrap.scss",
    "dist/js/bootstrap.js"
  ],

Они выдергиваются в мою папку с библиотеками, но уже в файле bootstrap.scss прописаны куча импортов на подобие этого

@import "variables";
@import "mixins";
@import "custom";

Естественно эти файлы не импортуются, так как лежат в папке bower`a, а не в той куда я выдергиваю главный файл. Так вот вопрос: как мне выдергивать все нужные файлы для bootstrap`a, чтобы я его мог нормально скомпилировать, не прописывать же мне руками все пути в bootstrap.scss? Или еще бывает в некоторых плагинах нужно подтянуть папку со шрифтами (например в fontawesome), как такое сделать?

Вот структура проекта: prnt.sc/edbrta

Вопрос задан более трёх лет назад
533 просмотра

4 комментария

Подписаться 4 Оценить 4 комментария

xutesayor @xutesayor

Использовать npm и webpack

Написано более трёх лет назад
Dark19 @Dark19 Автор вопроса

xutesayor: webpack может полностью заменить gulp в любых проектах, задачах?

Написано более трёх лет назад
xutesayor @xutesayor

Dark19: да

Написано более трёх лет назад
Dark19 @Dark19 Автор вопроса

xutesayor: я как-то начал разбираться с webpack когда на angular 2 приложение делал, но он какой-то трудный мне показался напротив gulp. Спасибо за совет, попробую разобраться с ним нормально.

Написано более трёх лет назад

Решения вопроса 1

4 комментария

Dark19 @Dark19 Автор вопроса

Но мне кажется, лучшим решением было бы изменить путь для загрузки bower зависимостей сразу в папку app и спокойно собирать проект, не переопределяя main файлы, копируя кучу файлов для каждой новой зависимости

Я сейчас сделал так: отискиваю в bower_components scss, sass, css файлы проганяю их через gulp-sass и переношу уже скомпилированные css файлы в app/css/libs, вы это имели ввиду сделать? (папку не переносил, так как не вижу надобности, можно при переносе файлов из bower_components в app компилировать их). Под шрифты fontawesome походу нужно делать отдельную задачу, чтобы их выдергивать?

Написано более трёх лет назад
ffklffkl @ffklffkl

Dark19: Не совсем это я имел ввиду. Я предлагал изменить корневую директорию зависимостей bower в файле .bowerrc на, например, app/libs, чтобы можно было подключать bootstrap и другие зависимости, не копируя их. Но, видимо, я не так понял задачу)
А под fontawesome придется делать отдельный таск, думаю. Сам сейчас разбираюсь со сборкой шрифтов таким образом.

Написано более трёх лет назад
Dark19 @Dark19 Автор вопроса
ffklffkl: можешь дать пример таска как ты вытягиваешь шрифты из бовер пакетов, я делаю:
"overrides": { "font-awesome": { "main": ["scss/font-awesome.scss", "fonts/*.*"] } }

и в gulp создаю таск
gulp.task('fontawesome', function(){ return gulp.src(mainBowerFiles('**/*.+(otf|eot|svg|ttf|woff|woff2)')) .pipe(gulp.dest(path.app.fonts)); });
Написано более трёх лет назад
ffklffkl @ffklffkl
Dark19: С mainBowerFiles у меня был аналогичный таск, но сейчас я решил вытягивать напрямую из папки fontawesome
gulp.task('fontawesome:copy', function () { return gulp.src(options.fontawesomePath) .pipe(gulp.dest(options.fontawesomeDest)) });
Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

Dark19 @Dark19 Автор вопроса
Так это получается мне к каждому такому плагину у которого в одном файле импортится куча других нужно прописывать пути к этим импортам если они лежат в папке бовера? А если например мне папку со шрифтами нужно подтянуть из папки бовера чтобы пути не менять? Я знаю, что можно в таске где выдергивается файл из бовера прописать ещё какие файлы можно дополнительно нужно выдергнуть, но это тоже геморно, я думал, есть путь попроще. Странно тогда почему разработчики плагинов не прописывают все нужные файлы для работы плагина в bower.json:
"main": [ "scss/bootstrap.scss", "dist/js/bootstrap.js" ],
Написано более трёх лет назад
quramolt @quramolt

Да вроде нет. Как бы подключать только нужный файл, а если в нём прописаны ещё относительно зависимости, то дальше по цепочке известно, где их искать. Ну а то, что js и scss файлы надо использовать и подключать отдельно - вроде так и должно быть

Но, вероятно, вам лучше подождать ещё одного ответа :)

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+1 ещё

Средний
При создании PWA ошибка Cannot read properties of null (reading 'prompt'), в чем проблема?
- 1 подписчик
- 2 часа назад
- 24 просмотра
0

ответов
JavaScript

+1 ещё

Средний
Как сделать так, чтобы клик по object передавался родителю?
- 1 подписчик
- 2 часа назад
- 75 просмотров
2

ответа
JavaScript

+1 ещё

Средний
Как сделать программную навигацию без изменения url в vue-router + vue3?
- 1 подписчик
- 13 часов назад
- 37 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Как скачать pdf из встроенного просмотрщика на сайте?
- 1 подписчик
- 20 часов назад
- 127 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как построение маршрута на 2GIS API v2.0?
- 1 подписчик
- 21 час назад
- 47 просмотров
0

ответов
JavaScript

Средний
Эффект наложения блоков?
- 1 подписчик
- вчера
- 109 просмотров
2

ответа
JavaScript

+2 ещё

Средний
Как изменить содержание блока програмно со свойством contentEditable?
- 1 подписчик
- вчера
- 87 просмотров
0

ответов
JavaScript

+4 ещё

Средний
Как сделать правильное динамическое масштабирование ion-range в зависимости от ширины колонок линии со значениями?
- 1 подписчик
- вчера
- 48 просмотров
0

ответов
JavaScript

Простой
Как после сабмита очистить поле type="tel" и показать очищенную маску?
- 2 подписчика
- вчера
- 71 просмотр
0

ответов
JavaScript

+1 ещё

Простой
Почему при добавление переменно в style, она перестаёт обновляться?
- 1 подписчик
- 22 апр.
- 71 просмотр
1

ответ
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Разработка одностраничника

25 апр. 2024, в 11:02

5000 руб./за проект

Фронт мобильное приложение

25 апр. 2024, в 10:42

150000 руб./за проект

Настроить вёрстку webapp-telegram

25 апр. 2024, в 10:41

2000 руб./за проект

xutesayor: webpack может полностью заменить gulp в любых проектах, задачах?
xutesayor: я как-то начал разбираться с webpack когда на angular 2 приложение делал, но он какой-то трудный мне показался напротив gulp. Спасибо за совет, попробую разобраться с ним нормально.

Answer 1 · 2017-02-26 20:05:53

Можете попробовать такой способ
В bower.json перегрузить main для бутстрапа

"overrides": {
    "bootstrap": {
      "main": [
        "./assets/stylesheets/**/*.scss"
      ]
    }

Затем вытянуть все файлы, изменив base (тогда структура папок сохранится). Возможно, поэлегантнее relative часть пути можно изменить, но пока так...

gulp.task('bootstrap', function () {
    return gulp.src(mainBowerFiles('**/*.{sass,scss}'), {base: __dirname + '/bower_components/bootstrap/'})
        .pipe(gulp.dest('./app/css/libs'))
});

Но мне кажется, лучшим решением было бы изменить путь для загрузки bower зависимостей сразу в папку app и спокойно собирать проект, не переопределяя main файлы, копируя кучу файлов для каждой новой зависимости

Answer 2 · 2017-02-26 09:31:40

Если я правильно понял вопрос и вы хотите грузить файлы по отдельности, то у плагина gulp-sass (и у node-sass, есс-но, тоже) есть опция includePaths
В этой опции можно перечислить массив путей до папок, а в main.scss соот-но можно подключать файлы, начиная от этих путей

Как подгрузить все нужные файлы из bower папки?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт