bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

gulp-bem-bundle-builder: Сборка с зависимостями #1535

Open ortophius opened 6 years ago

ortophius commented 6 years ago

Я не так давно пытаюсь в сборку с помощью Gulp. Конфиг project-stub показался мне слишком сложным для понимания, вдобавок мне нужно было настроить сборку HTML из файлов pug, поэтому было решено затрайхардить и написать свой конфиг. В итоге решения основной задачи я с горем пополам вроде как добился, сейчас в сборку подключаются блоки, которые майнятся из pug файлов, но теперь появилась другая потребность - добавлять в сборку блоки с учётом зависимостей. Конкретный пример - для того, чтобы добавить блок filter в сборку, необходим jquery, который также реализован отдельным блоком jquery с одной технологией jquery.js. По логике вещей я должен создать файл filter.deps.js, зависимости из которого также будут добавлены в сборку перед целевым блоком.

Очевидно, этого не происходит, иначе бы я сюда не написал :)

Ниже приведён код соответствующего таска Gulp:

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'],
            cascade: false
          })
          .pipe(concat(`${bundle.name+'/'+bundle.name}.css`)),
        js: bundle => bundle.src('js').pipe(concat(`${bundle.name+'/'+bundle.name}.js`))
    }))
    .pipe(gulp.dest('dist/'));
});

Содержимое deps.js:

module.exports = [{
    mustDeps : 'jquery'
}]

В результате конечный BemBundle.decl содержит все нужные блоки, кроме jquery, который должен быть подключен в качестве зависимости.

Вероятнее всего, я неверно понимаю принципы работы сборщика, поэтому прошу при возможности объяснить, где я налажал. Спрашиваю не от лени - просто дело в том, что документации у плагина сильно не хватает, что, ИМХО, является распространённой проблемой подобных инструментов "для БЭМ" и дополнительно повышает порог вхождения, так что большому счёту я пользовался материалами из вебинаров, васянских гайдов и пытался разобраться в исходниках.

Realetive commented 6 years ago

Могу предположить, что у вас в принципе не задействована deps-технология, т. к. вы генерируете decl-файл из bemjson (судя по .pipe(tobemjson())). А туда попадает всё, что описано в bemjson, а не в deps.

ortophius commented 6 years ago

@Realetive Благодарю, видимо я всё-таки неверно понял принцип работы bundle builder'a. Он действительно получает единственный bemjson из вёрстки страницы, и составляет на его основе декларацию, при этом включает в сборку все блоки, присутствующие в этой декларации. Я думал, что при добавлении блоков он будет учитывать также и декларации самих блоков автоматически. Правильно ли я понимаю, что для подключения технологий decl.js, необходимо просто создать соответствующий таргет? Если да, то каким именно образом обрабатывать подобные файлы bem-bundle-builder'ом?

Realetive commented 6 years ago

@ortophius увы, я вообще gulp не юзаю для БЭМ-стека — освоил enb-сборщик.

tadatuta commented 6 years ago

Чтобы все работало как нужно, можно за основу взять конфиг из https://github.com/bem/project-stub/blob/master/gulpfile.js и добавить шаг преобразования из pug в bemjson.