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

Question

[Dark19]

Доброго времени суток. Пользуюсь 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

Comments

[xutesayor]

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

[Dark19]

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

[xutesayor]

Dark19: да

[Dark19]

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

Answer 1

[ffklffkl]

Можете попробовать такой способ
В 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 файлы, копируя кучу файлов для каждой новой зависимости

Comments

[Dark19]

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

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

[ffklffkl]

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

[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]

Dark19: С mainBowerFiles у меня был аналогичный таск, но сейчас я решил вытягивать напрямую из папки fontawesome

gulp.task('fontawesome:copy', function () {
    return gulp.src(options.fontawesomePath)
        .pipe(gulp.dest(options.fontawesomeDest))
});

Answer 2

[quramolt]

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

Comments

[Dark19]

Так это получается мне к каждому такому плагину у которого в одном файле импортится куча других нужно прописывать пути к этим импортам если они лежат в папке бовера? А если например мне папку со шрифтами нужно подтянуть из папки бовера чтобы пути не менять? Я знаю, что можно в таске где выдергивается файл из бовера прописать ещё какие файлы можно дополнительно нужно выдергнуть, но это тоже геморно, я думал, есть путь попроще. Странно тогда почему разработчики плагинов не прописывают все нужные файлы для работы плагина в bower.json:

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

[quramolt]

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

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