Как подключить библиотеки из bower_components с помощью gulp?

Question

[Илья Бельский]

Доброго времени суток! Существует ли возможность автоматически подключать библиотеки типа fontawesome, bootstrap и т.д, с помощью gulp? Я знаю что есть, но почему то у меня не получается подключить именно перечисленные выше либы с помощью wiredep. Какие еще есть способы позволяющие автоматизировать этот процесс? Схема должна быть такая - я установил через bower какую-либо библиотеку с ключом save, gulp следит за изменениями в bower.json и при изменениях подгружает пути в индексный файл html.

Answer 1

[HamSter]

Использую wiredep , позволяет вытягивать все, что установлено с помощью bower + gulp-useref, для того чтобы вытянуть все в dist (релиз).

к примеру подключение стилей в index.html в исходной папке app, выглядит так

<!-- build:css css/vendor.css -->
		<!-- bower:css -->
		<!-- endbower -->
	<!-- endbuild -->

А на выходе в index.html в релизной папке dist получится такое
<link rel="stylesheet" href="css/vendor.css">
Описание подключения в gulpfile.js есть, не должно составить труда ...

.pipe(wiredep())
.pipe(useref())

Comments

[Илья Бельский]

А не покажете если не сложно, как файлы вытягиваете с помощью useref?

Answer 2

[sergey]

Я например делаю так: мой таск (как пример) с использованием main-bower-files

gulp.task('styles:vendor', function() {
  gulp.src(mainBowerFiles({
          "overrides": {
              "normalize.css": {
                  "main": "./normalize.css"
              },

              "magnific-popup": {
                  "main": "./dist/magnific-popup.css"
              },

              "slick-carousel": {
                  "main": [
                      "./slick/slick.css",
                      "./slick/slick-theme.css",
                      "./slick/fonts/*.*"
                  ]
              }
          }
  }))
  .pipe(cssFilter)
  .pipe(concat('vendor.css'))
  .pipe(gulpIf(env !== 'dev', minifyCSS()))
  .pipe(gulp.dest(outputDir + 'css'))
});

и если понимаете принципы работы gulp, то дальше вам все должно быть понятно. В индексе у меня два файла стиля: main.css и vendor.css, аналогичная ситуация и с js.

Comments

[Илья Бельский]

Да, я знаком с таким способом, но скажите конкатенированые файлы между собой не конфликтуют? К примеру если я в один vendor.js запихаю bootstrap.js и jquery.js?

[sergey]

Илья Бельский: нет не конфликтуют, я не замечал такого, у меня кстати сейчас в проекте в js и bootstrap и jquery, и еще несколько библиотек. Более того при установке всего этого через bower, система вам сама укажет версии необходимые для проекта

[Илья Бельский]

SM: Спасибо!

[sergey]

Илья Бельский: пожалуйста