Open webtehnology opened 7 years ago
Привет!
Скорее всего нужно в конфиге указать techMap: { css: [ 'styl', 'css' ] }
и подключить stylus через gulpif (или даже без него)
@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']));
вроде конфиг в порядке. может быть файл не попал в сборку, т.к. его нет в зависимостях или проскочила какая-то опечатка в имени папки/файла?
Пробовал отдельно собрать бандл с формами которые скачал отсюда https://github.com/bem-contrib/bem-forms enb make собирает, а gulp увы. Но если я к примеру в папке блок заменю файл form.styl на form.css то при сборке gulp все в порядке
Очень хочется вникать глубже и перейти полностью на полный БЭМ, пока собрал вот такой проект http://xn-----6kcacmblchsgfcde2ag6bnetqkov0a1gua5y.xn--80adxhks/
У меня тоже некоторые плагины сборки не срабатывают, к примеру - в сборку стилей попадают стили не используемых блоков. Пока оставил так, с разметкой бы до конца разобраться.
По вашему сайту, результаты по оптимизации желают лучшего - 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 раз, а каскад уже не позволяет продуктивно добавлять страницы
@DjonyBastone Оптимизация в процессе, запустить нужно было за 4 дня+неделя на дизайн, теперь допил.
@webtehnology Отпишись пожалуйста, если решишь проблему при сборке - styl
@DjonyBastone так же собираете с gulp?
Да с Gulp. Судя по видео-выступлениям почувствовалась тенденция - Ребята с Яндекс чаще стали применять Gulp для сборки.
@webtehnology а есть возможность пошарить проект? Так вслепую сложно что-то сделать.
Все решилось просто добавил styl, проблема скорее внимательности. Приношу прошения за тупость
gulp.task('watch', function () {
gulp.watch('./*.bundles/**/*.bemjson.js', gulp.series('build'));
gulp.watch('./*.blocks/**/*.{styl,css,js}', gulp.series('build'));
});
@tadatuta Подскажите, как можно наиболее простым путем подключать переменные. Суть простая, все цвета собрать в один модификатор (page_theme_name.styl), сохранить его в расширении .styl и потом уже использовать эти переменные по проекту в разных блоках.
Или собрать все цвета как модификаторы к примеру блок font, но уж больно громозко получается
Все решилось просто добавил styl
А, так проблема была в том, что вотчер не видел изменений. А мы на саму сборку смотрели)
Подскажите, как можно наиболее простым путем подключать переменные.
В простейшем случае, кажется, ты можешь для page в модификаторе theme просто набор постоянный переменных менять и использовать по проекту попросив в депсах нужной сущности.
mustDeps: [{ block: 'page', mod: 'theme', val: 'mytheme' }]
@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- в блоке использую переменную
Всем привет! Пользовался только css и проблем не было, но решил попробовать блок форм bem-forms. При сборке enb все собирается на ура и формы отображаются как нужно, а вот если через gulp, то обычный css собирается нормально, а конструкции как ниже уже в сборку не попадают.