bem+gulp не собирает .styl

[webtehnology]

Всем привет! Пользовался только css и проблем не было, но решил попробовать блок форм bem-forms. При сборке enb все собирается на ура и формы отображаются как нужно, а вот если через gulp, то обычный css собирается нормально, а конструкции как ниже уже в сборку не попадают.

`.label {

    display: inline-block;

    font-weight: 600;

    padding-bottom: 5px;

    &_disabled {

        opacity: .5;

    }

}`

[qfox]

Привет!

Скорее всего нужно в конфиге указать techMap: { css: [ 'styl', 'css' ] } и подключить stylus через gulpif (или даже без него)

[webtehnology]

@zxqfox В файле gulpfile.js указано const stylus = require('gulp-stylus'); и как видно тут тоже css: ['styl', 'css']

const builder  = Builder({
    levels: [
        'libs/bem-core/common.blocks',
        'libs/bem-core/desktop.blocks',
        'libs/bem-components/common.blocks',
        'libs/bem-components/desktop.blocks',
        'libs/bem-components/design/common.blocks',
        'libs/bem-components/design/desktop.blocks',
        'common.blocks',
        'desktop.blocks',
        'touch-phone.blocks'
    ],
    techMap: {
        bemhtml: ['bemhtml.js'],
        js: ['vanilla.js', 'browser.js', 'js'],
        css: ['styl', 'css']
    }
});

Вот весь листинг файла

const Builder = require('gulp-bem-bundle-builder');
const bundler = require('gulp-bem-bundler-fs');
const gulp = require('gulp');
const path = require('path');
const rename = require("gulp-rename");
const postcss = require('gulp-postcss');
const postcssUrl = require('postcss-url');
const autoprefixer = require('autoprefixer');
const debug = require('gulp-debug');
const csso = require('gulp-csso');
const filter = require('through2-filter').obj;
const merge = require('merge2');
const concat = require('gulp-concat');
const stylus = require('gulp-stylus');
const uglify = require('gulp-uglify');
const bemhtml = require('gulp-bem-xjst').bemhtml;
const toHtml = require('gulp-bem-xjst').toHtml;
const browserSync = require("browser-sync");
 reload      = browserSync.reload;

const builder  = Builder({
    levels: [
        'libs/bem-core/common.blocks',
        'libs/bem-core/desktop.blocks',
        'libs/bem-components/common.blocks',
        'libs/bem-components/desktop.blocks',
        'libs/bem-components/design/common.blocks',
        'libs/bem-components/design/desktop.blocks',
        'common.blocks',
        'desktop.blocks',
        'touch-phone.blocks'
    ],
    techMap: {
        bemhtml: ['bemhtml.js'],
        js: ['vanilla.js', 'browser.js', 'js'],
        css: ['styl', 'css']
    }
});
var project = 'promo-elem';
var config = {
    server: {
        baseDir: './desktop.bundles/'+ project + '/'
            },
    files: ['./*.bundles/**/*.{html, css, js}' ],
    tunnel: true,
    host: 'localhost',
    port: 8080,
    logPrefix: "Web"
};

gulp.task('build', () => {
    return bundler('*.bundles/'+ project + '/')
        .pipe(builder({
            css: bundle =>
                bundle.src('css')
                    .pipe(stylus())
                    .pipe(postcss([
                        autoprefixer({
                            browsers: ['ie >= 10', 'last 2 versions', 'opera 12.1', '> 2%']
                        }),
                        postcssUrl({ url: 'inline' })
                    ]))
                    .pipe(csso())
                    .pipe(concat(bundle.name + '.min.css')),
            js: bundle =>
                merge(
                    gulp.src(require.resolve('ym')),
                    bundle.src('js').pipe(filter(f => ~['vanilla.js', 'browser.js', 'js'].indexOf(f.tech))),
                    bundle.src('js').pipe(filter(file => file.tech === 'bemhtml.js'))
                        .pipe(concat('browser.bemhtml.js')).pipe(bemhtml())
                )
                    .pipe(uglify())
                    .pipe(concat(bundle.name + '.min.js')),
            tmpls: bundle =>
                bundle.src('bemhtml')
                    .pipe(concat('any.bemhtml.js'))
                    .pipe(bemhtml())
                    .pipe(concat(bundle.name + '.bemhtml.js')),
            html: bundle => {
                const bemhtmlApply = () => toHtml(bundle.target('tmpls'));
                return gulp.src(bundle.dirname + '/*.bemjson.js')
                    .pipe(bemhtmlApply());

            }
       }))

       .on('error', console.error)
       .pipe(debug())
       .pipe(gulp.dest(file => path.dirname(file.path)));       
});
gulp.task('browser-sync', function () {
    browserSync(config);
});

gulp.task('watch', function () {
    gulp.watch('./*.bundles/**/*.bemjson.js', gulp.series('build'));
    gulp.watch('./*.blocks/**/*.{css,js}', gulp.series('build'));    

});

gulp.task('default', gulp.parallel(['watch', 'browser-sync']));

[tadatuta]

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

[webtehnology]

Пробовал отдельно собрать бандл с формами которые скачал отсюда https://github.com/bem-contrib/bem-forms enb make собирает, а gulp увы. Но если я к примеру в папке блок заменю файл form.styl на form.css то при сборке gulp все в порядке

[webtehnology]

Очень хочется вникать глубже и перейти полностью на полный БЭМ, пока собрал вот такой проект http://xn-----6kcacmblchsgfcde2ag6bnetqkov0a1gua5y.xn--80adxhks/

[DjonyBastone]

У меня тоже некоторые плагины сборки не срабатывают, к примеру - в сборку стилей попадают стили не используемых блоков. Пока оставил так, с разметкой бы до конца разобраться.

По вашему сайту, результаты по оптимизации желают лучшего - https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fxn-----6kcacmblchsgfcde2ag6bnetqkov0a1gua5y.xn--80adxhks%2F%23photo&tab=mobile И с адаптивностью еще решать надо.

Мне вот интересно - почему технологии *.min.js, инсайт предлагает оптимизировать? (БЭМ технологии вроде впорядке, сначала core принял за bem-core)

P.S. Эмпатия на моменте освоения методологии. Эйфория прошла, сейчас уже приходится думать, какие технологии использовать, а какие не нужно тянуть в проект... osipbove.ru - пересобираю проект по БЭМ, т.к. планируется увеличение проекта в 5-8 раз, а каскад уже не позволяет продуктивно добавлять страницы

[webtehnology]

@DjonyBastone Оптимизация в процессе, запустить нужно было за 4 дня+неделя на дизайн, теперь допил.

[DjonyBastone]

@webtehnology Отпишись пожалуйста, если решишь проблему при сборке - styl

[webtehnology]

@DjonyBastone так же собираете с gulp?

[DjonyBastone]

Да с Gulp. Судя по видео-выступлениям почувствовалась тенденция - Ребята с Яндекс чаще стали применять Gulp для сборки.

[skad0]

@webtehnology а есть возможность пошарить проект? Так вслепую сложно что-то сделать.

[webtehnology]

Все решилось просто добавил styl, проблема скорее внимательности. Приношу прошения за тупость

gulp.task('watch', function () {
    gulp.watch('./*.bundles/**/*.bemjson.js', gulp.series('build'));
    gulp.watch('./*.blocks/**/*.{styl,css,js}', gulp.series('build'));    
});

[webtehnology]

@tadatuta Подскажите, как можно наиболее простым путем подключать переменные. Суть простая, все цвета собрать в один модификатор (page_theme_name.styl), сохранить его в расширении .styl и потом уже использовать эти переменные по проекту в разных блоках.

Или собрать все цвета как модификаторы к примеру блок font, но уж больно громозко получается

[skad0]

Все решилось просто добавил styl

А, так проблема была в том, что вотчер не видел изменений. А мы на саму сборку смотрели)

[skad0]

Подскажите, как можно наиболее простым путем подключать переменные.

В простейшем случае, кажется, ты можешь для page в модификаторе theme просто набор постоянный переменных менять и использовать по проекту попросив в депсах нужной сущности.

mustDeps: [{ block: 'page', mod: 'theme', val: 'mytheme' }]

[webtehnology]

@skad0 Все верно, вотчер не видел что происходит с файлами+пришлось обновить gulp-stylus Правильно ли я понял, но не работает 1- создать модификатор для блока page, page_theme_mytheme 2- создать файл page_theme_mytheme.styl 3- создать переменные в файле page_theme_mytheme.styl 4- для блока в котором хочу использовать переменные в депсах указываю

{
    mustDeps: [
        {
            block: 'page',
            mod: 'theme',
            val: 'satu' 
        }
    ]
}

5- в блоке использую переменную