Всем доброго времени суток не могу понять почему не работает POST CSS и плагин autoprefixer
make.js и почему версии CSS не минимализированы http://joxi.ru/eAOG9BECxjWo6A
const techs = {
// essential
fileProvider: require('enb/techs/file-provider'),
fileMerge: require('enb/techs/file-merge'),
// optimization
borschik: require('enb-borschik/techs/borschik'),
// css
postcss: require('enb-postcss/techs/enb-postcss'),
postcssPlugins: [
require('postcss-import')(),
require('postcss-each'),
require('postcss-for'),
require('postcss-simple-vars')(),
require('postcss-calc')(),
require('postcss-nested'),
require('rebem-css'),
require('postcss-url')({ url: 'rebase' }),
require('autoprefixer')(),
require('postcss-reporter')()
],
// js
browserJs: require('enb-js/techs/browser-js'),
// bemtree
// bemtree: require('enb-bemxjst/techs/bemtree'),
// bemhtml
bemhtml: require('enb-bemxjst/techs/bemhtml'),
bemjsonToHtml: require('enb-bemxjst/techs/bemjson-to-html')
},
enbBemTechs = require('enb-bem-techs'),
levels = [
{ path: 'node_modules/bem-core/common.blocks', check: false },
{ path: 'node_modules/bem-core/desktop.blocks', check: false },
{ path: 'node_modules/bem-components/common.blocks', check: false },
{ path: 'node_modules/bem-components/desktop.blocks', check: false },
{ path: 'node_modules/bem-components/design/common.blocks', check: false },
{ path: 'node_modules/bem-components/design/desktop.blocks', check: false },
'common.blocks',
'desktop.blocks'
];
module.exports = function(config) {
const isProd = process.env.YENV === 'production';
config.nodes('*.bundles/*', function(nodeConfig) {
nodeConfig.addTechs([
// essential
[enbBemTechs.levels, { levels: levels }],
[techs.fileProvider, { target: '?.bemjson.js' }],
[enbBemTechs.bemjsonToBemdecl],
[enbBemTechs.deps],
[enbBemTechs.files],
// css
[techs.postcss, {
target: '?.css',
oneOfSourceSuffixes: ['post.css', 'css'],
plugins: techs.postcssPlugins
}],
// bemtree
// [techs.bemtree, { sourceSuffixes: ['bemtree', 'bemtree.js'] }],
// bemhtml
[techs.bemhtml, {
sourceSuffixes: ['bemhtml', 'bemhtml.js'],
forceBaseTemplates: true,
engineOptions : { elemJsInstances : true }
}],
// html
[techs.bemjsonToHtml],
// client bemhtml
[enbBemTechs.depsByTechToBemdecl, {
target: '?.bemhtml.bemdecl.js',
sourceTech: 'js',
destTech: 'bemhtml'
}],
[enbBemTechs.deps, {
target: '?.bemhtml.deps.js',
bemdeclFile: '?.bemhtml.bemdecl.js'
}],
[enbBemTechs.files, {
depsFile: '?.bemhtml.deps.js',
filesTarget: '?.bemhtml.files',
dirsTarget: '?.bemhtml.dirs'
}],
[techs.bemhtml, {
target: '?.browser.bemhtml.js',
filesTarget: '?.bemhtml.files',
sourceSuffixes: ['bemhtml', 'bemhtml.js'],
engineOptions : { elemJsInstances : true }
}],
// js
[techs.browserJs, { includeYM: true }],
[techs.fileMerge, {
target: '?.js',
sources: ['?.browser.js', '?.browser.bemhtml.js']
}],
// borschik
[techs.borschik, { source: '?.js', target: '?.min.js', minify: isProd }],
[techs.borschik, { source: '?.css', target: '?.min.css', minify: isProd }]
]);
nodeConfig.addTargets([/* '?.bemtree.js', */ '?.html', '?.min.css', '?.min.js']);
});
};
Заранее благодарю!
Судя по конфигу, автопрефиксер должен работать, но, возможно, следует передать ему конфиг необходимых браузеров (сейчас ничего не передается и, как вариант, он считает, что все поддерживаемые браузеры уже достаточно умные и добавлять префиксы нет необходимости).
А минификация будет работать только в production-режиме. Чтобы его включить, необходимо запускать сборку с переменной окружения
YENV=production
Спасибо Владимир, постепенно изучая все получается, с autoprefixer разобрался. У меня к Вам есть несколько вопросов про БЭМ и не по теме.
Про БЭМ: https://ru.bem.info/forum/-686/ здесь есть Ваш мастер класс
Не по теме: Интересно Ваше мнение.
Он устарел в смысле конкретного кода, но все еще актуален в плане базовых принципов, по которым работает сборка.
На скриншоте просто комментарии, но теперь действительно есть поддержка sourcemap, которая более удобна. Включение зависит от конкретной используемой технологии, нужно свериться с документацией. Но если речь про project-stub и сборку на ENB, то нужно смотреть в сторону опций в файле
.enb/make.js
у технологий, генерирующих CSS.да.
flexbox в полный рост, а если не смотреть на IE, то и гриды (https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout).
Мы используем тесты скриншотами с помощью https://github.com/gemini-testing/hermione/#assertview
конечно!
Большое спасибо Владимир. Очень помогли.