Настройка bem-grid

[FA73F0X]

Здравствуйте! Нужна помощь по настройке bem-grid. Делаю все как написано здесь https://github.com/bem-incubator/bem-grid Но в результате стилей в браузере нет. enb make отрабатывает без ошибок. Я понимаю, что дело в настройке, но информацию по этой теме найти не могу. На форуме подобная тема есть. В конце отписались, что заработало а что сделали ни слова. Если есть у кого инструкция или статья по настройке, буду благодарен и думаю в дальнейшем не только я.

[awinogradov]

Ну не знаю) У меня такая же нога и не болит) https://github.com/theprotein/sharps/blob/master/.enb/make.js

[DjonyBastone]

gulpfile теперь содержит такую внутренность:

css: bundle => bundle.src('css') .pipe(stylus()) .pipe(require('gulp-one-of')()) .pipe(postcss([ require('postcss-import')(), require('postcss-each'), require('postcss-for'), require('postcss-simple-vars')(), require('postcss-calc')(), require('postcss-nested'), require('rebem-css'), require('sharps')({ columns: 12, maxWidth: '2048px', gutter: '10px', flex: 'flex' }), require('postcss-url')({ url: 'inline' }), require('autoprefixer')(), require('postcss-reporter')() ])) .pipe(concat(bundle.name + '.min.css')) .pipe(csso()),

С такой настройкой выдает лог как - в моем предыдущем сообщении.

Из лога я понял что-то с map и target.

Кто нибудь с помощью gulp пробовал собирать css с Sharps ???

[awinogradov]

Выглядит так что sharps тут не причем. Пришли лог, непонятно же ничего.

[DjonyBastone]

E:\html\osipbove-bem-project\gulpfile.js default [15:31:45] Using gulpfile E:\html\osipbove-bem-project\gulpfile.js [15:31:45] Starting 'default'... [15:31:45] Starting 'build'... TypeError: require(...) is not a function at css (E:\html\osipbove-bem-project\gulpfile.js:58:42) at tryCatch (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:93:47) at tryCatch (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:137:16) at Object.keys.map.target (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:93:32) at Array.map (native) at DestroyableTransform._transform (E:\html\osipbove-bem-project\node_modules\gulp-bem-bundle-builder\lib\index.js:91:40) at DestroyableTransform.Transform._read (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_transform.js:159:10) at DestroyableTransform.Transform._write (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_transform.js:147:83) at doWrite (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_writable.js:347:64) at writeOrBuffer (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_writable.js:336:5) at DestroyableTransform.Writable.write (E:\html\osipbove-bem-project\node_modules\readable-stream\lib_stream_writable.js:274:11) at Readable.ondata (_stream_readable.js:555:20) at emitOne (events.js:96:13) at Readable.emit (events.js:188:7) at readableAddChunk (_stream_readable.js:176:18) at Readable.push (_stream_readable.js:134:10) [15:31:46] gulp-debug: desktop.bundles\index\index.bemhtml.js [15:31:46] gulp-debug: desktop.bundles\index\index.html [15:31:47] gulp-debug: desktop.bundles\index\index.min.js [15:31:47] The following tasks did not complete: default, build [15:31:47] Did you forget to signal async completion?

Process finished with exit code 0

[DjonyBastone]

https://github.com/DjonyBastone/osipbove-bem-project.git

Здесь лежит проект в том состоянии в котором вылазит ошибка

[belozer]

@awinogradov при отключении sharps из списка ошибка require пропадает.

[belozer]

@awinogradov хотя разобрался с проблемой

@DjonyBastone не require

require('sharps')({ columns: 12, maxWidth: '2048px', gutter: '10px',   flex: 'flex' }),

а

sharps({ columns: 12, maxWidth: '2048px', gutter: '10px',   flex: 'flex' }),
// или
require('sharps').postcss({ columns: 12, maxWidth: '2048px', gutter: '10px',   flex: 'flex' }),

ты ведь вначале файла правильно объявил sharps

const sharps = require('sharps').postcss;

[DjonyBastone]

Алиллуя!!! ЗАРАБОТАЛО

@belozer спасибо

[DjonyBastone]

Sharps подключился. Собирает все медиа и классы которые есть в Sharps, т.е. не выборочно по наличию классов row и col. CSSO не вычищает - не используемые классы и @media, и в CSS попадает более 24000 строк.

1) Media queries не работает при следующих стилях: @media (--xxlarge-only) { .header { width: 50%; } } То есть при сборке нет ни --xxlarge-only, ни .header { width: 50%; }, блок: header в bemjson - существует

• Правильно ли задан класс?
• Должно ли собираться по этим данным вообще? И что должно собраться? Подразумевалось, что для данного диапазона экранов, header будет иметь ширину 50%

2) Проводят ли оптимизацию CSS после применения Sharps ? Какими инструментами это производится? (CSSO не вычищает)