Стандартные конфиги для технологий

[belozer]

Круто было бы так описывать сборку

gulp.task('common', function() {
    return gulp.src('bundles/common/common.bemdecl.js')
        .pipe(builder({'js': true, 'css': true, 'bemhtml.js': true, 'html': true}))
        .pipe(gulp.dest('./bundles/common'))
});

Если технология имеет значение true, тогда использовать шаблонную функцию для сборки.

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

[qfox]

Идея ясна. Может быть так:

const transforms = require('gulp-bem-transforms-classic');
const builder = Builder();
  // ...
  .pipe(builder({js: transforms.js, css: tranforms.css})) // так?

Потому что, строго говоря, js, css, html это просто текстовые метки.

[belozer]

@zxqfox у меня возникает желание лезть в transforms.js и теряется абстракция над сложностью процесса сборки.

Но мне в целом нравится реализация такого подхода как в enb

[techs.browserJs, {
  includeYM: true,
  sourceSuffixes: ['source.browser.js', 'vanilla.js', 'js', 'browser.js'],
  iife : true
}],

но только не тогда, когда он превращается в длиннющий конвеер. Ты смотришь на него и офигиваешь от того куда и от куда всё берётся.

(https://github.com/bem/bem-components/blob/v3/.enb/make.js)

Я бы предложил так

const techs = require('gulp-bem-transforms-classic');
const contibTech = require('gulp-bem-super-contrib-tech');
const builder = Builder([techs, contibTech]);
  // ...
  .pipe(builder({js: true, css: true, 'super-tech': true}))

[belozer]

.pipe(builder({ 
  'js': true, 
  'css': { autoprefixer: true }, 
  'super-tech': true, 
  'my-tech': { 
    handler: function () {...} 
  }
}))

ну или как вначале предложил, только более раскрыто

.pipe(builder({ 
  'js': true, 
  'css': { autoprefixer: true }, 
  'super-tech': true, 
  'my-tech': function (bundle) {...} 
}))

[belozer]

Когда мы объявляем const builder = Builder([techs, contibTech]);

Происходит маппинг технологий по своим (определённым в технологии) ключам. Если в builder({}) ключ технологии переназначается функцией, то происходит переназначения обработчика на пользовательский.

Если по ключу передаётся объект - то это входящие параметры для технологии, которую мы замапили.

[belozer]

Или маппинг можно проводить непосредственно перед самой сборкой

.pipe(builder([baseTechs, contibTech], { 
  'js': true, 
  'css': { autoprefixer: true }, 
  'super-tech': true, 
  'my-tech': function (bundle) {...} 
}))

upd.
данный подход позволяет для разных бандлов собирать одни и теже технологии, но с разным подходом (используя разные библиотеки)

[belozer]

Сами пакеты шаблонов могу включать в себя как 1 шаблон, так и целую библиотеку шаблонов (baseTechs).

[belozer]

const contibTech = require('gulp-bem-super-contrib-tech')({'contrib-js': 'js'})

переопределение пользовательских ключей для технологий

[belozer]

В конечном итоге gulpfile из вебинара мог бы выглядеть так

const Builder = require('gulp-bem-bundle-builder');
const gulp = require('gulp');
const baseTechs = require('gulp-bem-basetechs')

const builder = Builder({
  // default (common) levels
  levels: ['l1'],
  techMap: {
    bemhtml: ['bemhtml.js']
  }
});

gulp.task('bemdecl', function(){
    return gulp.src('bundles/bemdecl/bemdecl.bemdecl.js')
        .pipe(builder([baseTechs], { js: true }))
        .pipe(gulp.dest('bundles/bemdecl'));
});

gulp.task('bemjson', function(){
    return gulp.src('bundles/bemjson/bemjson.bemjson.js')
        .pipe(builder([baseTechs], { js: true }))
        .pipe(gulp.dest('bundles/bemjson'));
});

gulp.task('common', function() {
    return gulp.src('bundles/common/common.bemdecl.js')
        .pipe(builder([baseTechs], { 'js': true, 'css': true, 'bemhtml.js': true, 'html': true }))
        .pipe(gulp.dest('./bundles/common'))
});

Крутой же? ) Лаконичный и понятный ;)

[qfox]

🙀

[belozer]

@zxqfox я не пойму настроение смайла ) Это плохо, хорошо или невозможно?

[qfox]

@belozyorcev Просто ты так сильно усложняешь ;-)

Ведь такое API можно сделать в отдельном модуле:

const myBuilder = (techsPackages, needed) =>
    builder(Object.keys(needed).reduce((res, key) => {
        res[key] = needed[key] === true ?
            techsPackages.map(pkg => pkg[key])[0]
            : needed[key];
        return res;
    }, {}));

// ...
    .pipe(myBuilder([baseTechs], { 'js': true, 'css': true, 'bemhtml.js': true, 'html': true }))

С другой стороны, builder сам по себе может это содержать, но разве не проще это делать в отдельных пакетах?

[qfox]

Кстати, я скорее это вижу примерно таким API:

const builder = Builder({
    predefines: { js: transformStream, css: ..., etc... },
    predefines: require('gulp-bem-basetechs') // или так
    predefines: Object.assign({},
      require('gulp-bem-basetechs1'),
      require('gulp-bem-basetechs2'),
      require('gulp-bem-basetechs3')) // или так
});

builder({ js: true, css: true, ololo: true })

Но в таком случае не очень понятно почему не:

const js = require('gulp-bem-typical-js');
builder({ js });

И на left-pad смахивает)

[Yeti-or]

Проблема predefined-base-tech в том
что они потребуют постоянных расширений опциями тому включи автопрефиксер тому postCSS итп
и вот ты уже пишешь не понятные флоу сборки в виде пайпов а конфигурируешь опциями эти технологии не верю что будет {js: true}, который всех устроит

[belozer]

@Yeti-or часто приходится менять project-stub конфиг?

У меня нет. Но когда нужно, я копирую кусок кода и вставляю в свой конфиг при этом ищу куда бы его вставить правильно, чтобы всё заработало. Происходит дублирование и сложность переноса. А так можно было бы выносить конфиги в отдельные технологии.

И всё что нам нужно - подключить модуль / библиотеку и сказать "собери мне js и css".
Нужного модуля нет? Не проблема, пишем свой обработчик. Обработчик нужен другим? Ок. Публикуем модуль в npmjs.com

plugins: [
                  require('postcss-nested'),
                  require('pobem'),
                  require('postcss-media-minmax')(),
                  require('postcss-custom-media'),
                  require('postcss-css-variables')(),
                  require('lost')(),
                  require('sharps').postcss({
                    columns: 12, // default
                    maxWidth: '1100px',
                    gutter: '10px',
                    flex: 'flex'
                  }),
                  require('postcss-svg')({
                    paths: ['bem/icons'],
                    defaults: "[fill]: #000000; [fill-opacity]: 1",
                    svgo: true,
                    debug: true
                  })
                ]

У postcss сделано плагинами и воркфлоу понятен.

[belozer]

Меня не волнует какие манипуляции происходят в require('postcss-media-minmax')().
Я знаю что он даёт на выходе и всё, остальное мне не нужно знать.

upd
ну или require('postcss-css-variables')() или require('postcss-nested') и т.д.