Как использовать и для чего предназначен main-bower-files?

Question

[vasIvas]

Если кто-нибудь использует в своих проектах main-bower-files , то опишите вкратце его предназначение и покажите или подробно расскажите, как его запустить ( желательно на примере gulp ).

Я понимаю, что он предназначен, чтобы подключать библиотеки установленные с помощью bower к файлам.html, но не понимаю до конца, принцип. Да и запустить его не могу из-за того, что в доках написано -
это метод method(/* тут что-нибудь */) .

Answer 1

[Сергей Протько]

Он ничего не подключает. Задача этой штуки, собрать пути до всех библиотечек.

Приведу пример. Возьмем jQuery. Для того что бы использовать jQuery в своем проекте вам надо сделать следующее.
bower install --save jquery
bower будет искать пакет с названием jQuery, скачает его и на этом его миссия будет завершена, а у вас в директории bower_components (или как вы ее назвали в bowerrc), будет папка jquery с несколькими файликами. В случае jQuery вам нужен только один файл, он является главным.

В bower.json пакета jquery указывается главный файл (тот, который собственно и должен использоваться в проекте)

{
  "name": "jquery",
  "version": "2.1.2-pre",
  "main": "dist/jquery.js",

вот это вот поле main и содержит имя нужного нам файла. К слову файлов можно указывать сколько угодно и какого угодно типа.

Задача этой тулзы - пробежаться по всем зависимостям которые использует ваш проект, собрать пути до каждого файлика указанного в поле main конкретного пакета, и отдать вам массив этих путей.

Далее вы можете: сконкатенировать js-ки в один файл, закинуть их в другую тулзу которая постарается найти эту библиотеку в cdn и сделает локальный фэлбэк... вариантов масса. Суть в том что вам не нужно вручную прописывать пути до нужных файлов, это не интересно, скучно, и после обновления пакетов внезапно может поломаться сборка.

Comments

[LB777]

Как правильно написать task в гальпе для main-bower-files? Из инструкции на гитхабе ни чего не понял.

[Сергей Протько]

@LB777 ну как-то так:

gulp.task('vendors', function () {
    return gulp.src(mainBowerFiles())
        .pipe(filter('**/*.js'))
        .pipe(concat('vendor.js'))
        .pipe(gulp.dest('dist/scripts');
}

маленькое НО - поскольку vinyl-fs ресолвит файлы асинхронно, хорошо бы использовать еще gulp-order что бы привести файлы в стриме в тот порядок, в котором нам выдает его mainBowerFiles (он то хорошо хэндлит зависимости между компонентами). Иначе может возникнуть ситуация с неправильным порядком загрузки зависимостей.

[LB777]

У меня другая бяда:
Как бы не конфигурировал таск он всегда выдает такое:
Z:\home\task10.zz>gulp vendors
[15:11:00] Using gulpfile Z:\home\task10.zz\gulpfile.js
[15:11:00] Starting 'vendors'...
[15:11:00] 'vendors' errored after 854 ?s
[15:11:00] Error: Invalid glob argument:
at Gulp.src (Z:\home\task10.zz\node_modules\gulp\node_modules\vinyl-fs\lib\src\index.js:19:11)
at Gulp. (Z:\home\task10.zz\gulpfile.js:7:17)
at module.exports (Z:\home\task10.zz\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (Z:\home\task10.zz\node_modules\gulp\node_modules\orchestrator\index.js:273:3)
at Gulp.Orchestrator._runStep (Z:\home\task10.zz\node_modules\gulp\node_modules\orchestrator\index.js:214:10)
at Gulp.Orchestrator.start (Z:\home\task10.zz\node_modules\gulp\node_modules\orchestrator\index.js:134:8)
at C:\Users\Пётр\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:121:20
at process._tickCallback (node.js:419:13)
at Function.Module.runMain (module.js:499:11)
at startup (node.js:119:16)

================

Сам гальп фаил выглядеть так:

var gulp = require('gulp');
var filter = require('gulp-filter');
var concat = require('gulp-concat');
var mainBowerFiles = require('main-bower-files');

gulp.task('vendors', function () {
return gulp.src(mainBowerFiles())
.pipe(filter('**/*.js'))
.pipe(concat('vendor.js'))
.pipe(gulp.dest('dist/scripts'));
});

bower_components
и
bower.json

лежат в этой же папке, что и gulpfile.js

Другие таски выполняются без ошибок.
Может я что-то не так делаю....

В чём проблема и как её решить??

[Сергей Протько]

а что mainBowerFiles() выдает?

[LB777]

Z:\home\task10.zz>npm mainBowerFiles

Usage: npm

where is one of:
add-user, adduser, apihelp, author, bin, bugs, c, cache,
completion, config, ddp, dedupe, deprecate, docs, edit,
explore, faq, find, find-dupes, get, help, help-search,
home, i, info, init, install, isntall, issues, la, link,
list, ll, ln, login, ls, outdated, owner, pack, prefix,
prune, publish, r, rb, rebuild, remove, repo, restart, rm,
root, run-script, s, se, search, set, show, shrinkwrap,
star, stars, start, stop, submodule, t, tag, test, tst, un,
uninstall, unlink, unpublish, unstar, up, update, v,
version, view, whoami

npm -h quick help on
npm -l display full usage info
npm faq commonly asked questions
npm help search for help on
npm help npm involved overview

Specify configs in the ini-formatted file:
C:\Users\Пётр\.npmrc
or on the command line via: npm --key value
Config info can be viewed via: npm help config

npm@1.4.23 C:\Program Files\nodejs\node_modules\npm

[LB777]

note.js пока не знаю
поэтому не особо понимаю, что тут происходит и как понять что же выдает mainBowerFiles()

[Сергей Протько]

в смысле console.log(mainBowerFiles()) хотя бы.

[LB777]

Пардон, но я чё-то не понял где надо запускать console.log(mainBowerFiles()).
Я должен в проекте создать фаил html и в него прикрутить gulpfile.js , а уже в нём прописать console.log(mainBowerFiles()) и смотреть в консоли браузера, что он выдает??

[Сергей Протько]

в gulpfile.

gulp.task('vendor', function () {
    var mainFiles = bowerMainFiles();
    console.log(mainFiles);
    return gulp.src(mainFiles)...
}

[LB777]

в гальп файле написала следующие

var gulp = require('gulp');
var mainBowerFiles = require('main-bower-files');

gulp.task('vendors', function () {
var mainFiles = mainBowerFiles();
console.log(mainFiles);
});

На выходе получил

Z:\home\task10.zz>gulp vendors
[17:06:13] Using gulpfile Z:\home\task10.zz\gulpfile.js
[17:06:13] Starting 'vendors'...
[]
[17:06:13] Finished 'vendors' after 1.11 ms

Т.е. получается, что он ничего не находит и выдает пустой массив .

[LB777]

каталог в папке проекта получается следующего вида:
-bower_components
--colorbox
--jquery
-node_modules
--всякие подули
-dist
--то, что получается после обработки гальпом
bower.json
package.json
gulpfile.js

[LB777]

Понял почему он выдавал пустой массив.
Надо было установить параметр includeDev: true у mainBowerFiles()
Все работает, спасибо ;)

[NeXTs_od]

"закинуть их в другую тулзу которая постарается найти эту библиотеку в cdn и сделает локальный фэлбэк" название такой тулзы подскажите, пожалуйста

[NeXTs_od]

gulp-cdnizer?

Answer 2

[iboozy]

А как быть с библиотеками, которые не заполнили у себя поле "main" (пример: библиотека async)
И что делать, если у разных библиотек главный файл называется одинаково? (пример: select2 и angular-ui-select-2, второй зависит от первого, но называются одинаково select2.js)

Comments

[vasIvas]

Могу ошибаться, но массив содержит ссылки на файлы а не названия. И исходя из этого, все будет хорошо)

[iboozy]

как быть с теми, кто не заполнил поле "main" я понял, в bower.json заполнить "overrides" для этих библиотек. Но вот у select2 и angular-ui-select2 главные файлы называются одинаково "select2.js", и после подключения второй перетирает первый

[NeXTs_od]

Вы что-то путаете. В билиотеке async main был указан с самого первого коммита. Пруф: https://github.com/caolan/async/commit/bb53b1a488b... Та даже если б main и забыли указать - async имеет слишком большое комьюнити чтоб никто не обратил на это внимание. А если вы когда-то и столкнетесь с библиотекой у которой действительно не будет указан main, вам ничего не мешает сделать pull request добавив этот самый main.