Commit 21d475ba authored by Nikolay Gromov's avatar Nikolay Gromov

Пытаюсь настроить postcss

parent b680652e
......@@ -5,7 +5,9 @@ const fs = require('fs');
const gulp = require('gulp');
const gulpSequence = require('gulp-sequence');
const postcss = require('gulp-postcss');
const atImport = require("postcss-import")
const customProperties = require("postcss-custom-properties")
const autoprefixer = require("autoprefixer")
const notify = require('gulp-notify');
const gulpIf = require('gulp-if');
const debug = require('gulp-debug');
......@@ -22,6 +24,13 @@ let lists = getFilesList(pjson.configProject);
console.log('---------- Файлы и папки, взятые в работу:');
console.log(lists);
// Запишем стилевой файл диспетчер подключений
let styleImports = '';
lists.css.forEach(function(blockPath) {
styleImports += '@import url('+blockPath+');\n';
});
fs.writeFileSync('./src/css/style.css', styleImports);
// Запуск `NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
......@@ -37,12 +46,13 @@ gulp.task('clean', function () {
// Компиляция стилей
gulp.task('style', function () {
console.log('---------- Компиляция стилей');
return gulp.src(lists.css)
return gulp.src('./src/css/style.css')
.pipe(gulpIf(isDev, sourcemaps.init()))
.pipe(debug({title: "Style:"}))
.pipe(postcss([
customProperties({preserve: true}),
// autoprefixer({browsers: ['last 2 version']}),
// customProperties({preserve: true}),
atImport({resolve: function(id, basedir, importOptions){return basedir+id.replace(/^\.\/src\/css/,'');}}),
autoprefixer({browsers: ['last 2 version']}),
// mqpacker({
// sort: true
// }),
......
......@@ -44,6 +44,7 @@
"build": "cross-env NODE_ENV=production npm start build"
},
"devDependencies": {
"autoprefixer": "^6.7.7",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cleancss": "^0.2.2",
......@@ -55,6 +56,7 @@
"gulp-sequence": "^0.4.6",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.4.1",
"postcss-custom-properties": "^5.0.2"
"postcss-custom-properties": "^5.0.2",
"postcss-import": "^9.1.0"
}
}
.page-header {
display: flex;
color: var(--gray);
}
// Для импорта в диспетчер подключений: @import './src/blocks/page-header/page-header.less';
@import '../../less/variables.less'; // только для удобства обращения к переменным
.page-header {
}
/**
* ВНИМАНИЕ!
* Список подключений из папки блоков при старте автоматизации сверяется со
* списком используемых блоков в ./package.json и если там указаны какие-либо
* блоки, отсутствующие здесь, их импорты будут добавлены в нижней части файла.
*/
@import url(variables.css);
@import url(some-block-TESE.css);
/* @import url(global.css); */
@import url(../blocks/page-header/page-header.css);
@import url(../blocks/btn/btn.css);
@import url(./src/css/variables.css);
@import url(./src/blocks/page-header/page-header.css);
@import url(./src/blocks/page-footer/page-footer.css);
@import url(./src/blocks/page-footer/page-footer__inner.css);
@import url(./src/blocks/page-footer/page-footer--some-mod.css);
@import url(./src/css/print.css);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment