bem/gulp-bem

Сборка блоков с учётом зависимостей

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-код зависимости блока в итоговый бандл.

qfox commented

Хорошо, если вопрос исчерпан, то я закрываю)