Сборка блоков с учётом зависимостей
ortophius opened this issue · 2 comments
Привет! Ранее я задавал подобный вопрос на форуме bem.info, однако получил слишком мало информации, поэтому надеюсь, что непосредственный разработчик плагина сможет дать более полный ответ.
Суть вопроса - учитывает ли сборщик зависимости блоков?
Почему мне это непонятно - тут приведу код таска с пояснениями ниже:
gulp.task('deps', () => {
return gulp.src('bundles/**/*.pug')
.pipe(pug(pugConfig))
.pipe(tobemjson())
.pipe(builder({
css: bundle => bundle.src('css')
.pipe(autoprefixer(), {
browsers: ['last 2 versions', 'ie11']
})
.pipe(concat(`${bundle.name+'/'+bundle.name}.css`)),
js: bundle => bundle.src('js', {deps: false}).pipe(concat(`${bundle.name+'/'+bundle.name}.js`)),
static: bundle => gulp.src(pathsFromBem(bundle), {base: '.'})
.pipe(rename(file => {
console.log(bundle);
file.dirname = path.join(bundle.name, 'static', file.dirname.split(path.sep)[1]);
}))
.pipe(debug())
}))
.pipe(gulp.dest('dist/'));
});
Как видно, у меня есть бандл в .pug, который конвертится в html, который конвертится в bemjson, который конвертится в декларацию блоков, которые попадают в сборку. К слову, несмотря на страшноту конвейера, именно к этой части функционала вопроса нет - всё работает как часы.
Проблема начинается тогда, когда мне нужно подключать в сборку один блок при добавлении в бандл второго. Приведу пример.
Я создаю блок Filter, для его работы мне нужен Jquery. Я создал отдельный блок jquery, содержащий только сам код билиотеки - jquery.js. Далее я создаю в каталоге filter файл с именем filter.deps.js со следующим содержанием:
[ {entity: {block: 'jquery', tech: 'js'}} ]
Честно говоря, насколько я понимаю, сама форма содержания в данном случае не важна, так как я пробовал совершенно разные синтаксисы и вариации, начиная от официальных определений декларация на bem.info, и заканчивая фрагментами из документации уровня /b/ для других подобных плагинов.
Очевидно, блок jquery никак не попадает в итоговый bundle.js. Блока нет ни в конечном BemBundle, ни в файловой системе.
Я просмотрел конфиги gulp-bem-stub разных годов выпуска, и не нашёл в них принципиальных отличий от моего фрагмента кода, хотя утверждается, что данные конфиги обеспечивают сборку с зависимостями. Так что, скорее всего, я что-то не до конца понял или упустил.
Пожалуйста, подскажите, каким образом мне нужно изменить процесс сборки, чтобы плагин добавлял в css и js файлы также css и js блоков, которые указаны в зависимостях данного блока?
В дополнение к вопросу:
Ранее мне намекнули, что логика моей сборки, возможно, не подразумевает использования технологии deps.js, однако в документации bem-bundle-builder указано следующее:
BundleBuilder~Bundle.src
Gather vinyl file objects that responde to BEM entity declaration and their dependencies and return them as a readable stream.
То есть, судя по документации зависимости блоков всё-таки учитываются по-умолчанию, но на деле это не происходит.
Прошу меня извинить, вышло достаточно глупо с моей стороны. По большому счёту проблема решена.
В исходниках gulp-bem-src я откопал очень удачный комментарий, который говорит, что код из файлов deps.js выполняется во время сборки. Для проверки вместо объекта с депсами я положил в этот файл только одну строчку:
console.log('test')
Как и ожидалось, "test" было выведено на экран при следующей сборке. Значит, файлы deps.js всё-таки не игнорируются. После небольших правок в проекте мне удалось прикрутить JS-код зависимости блока в итоговый бандл.
Хорошо, если вопрос исчерпан, то я закрываю)