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

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

parent b680652e
...@@ -5,7 +5,9 @@ const fs = require('fs'); ...@@ -5,7 +5,9 @@ const fs = require('fs');
const gulp = require('gulp'); const gulp = require('gulp');
const gulpSequence = require('gulp-sequence'); const gulpSequence = require('gulp-sequence');
const postcss = require('gulp-postcss'); const postcss = require('gulp-postcss');
const atImport = require("postcss-import")
const customProperties = require("postcss-custom-properties") const customProperties = require("postcss-custom-properties")
const autoprefixer = require("autoprefixer")
const notify = require('gulp-notify'); const notify = require('gulp-notify');
const gulpIf = require('gulp-if'); const gulpIf = require('gulp-if');
const debug = require('gulp-debug'); const debug = require('gulp-debug');
...@@ -22,6 +24,13 @@ let lists = getFilesList(pjson.configProject); ...@@ -22,6 +24,13 @@ let lists = getFilesList(pjson.configProject);
console.log('---------- Файлы и папки, взятые в работу:'); console.log('---------- Файлы и папки, взятые в работу:');
console.log(lists); 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 // Запуск `NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev'; const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
...@@ -37,12 +46,13 @@ gulp.task('clean', function () { ...@@ -37,12 +46,13 @@ gulp.task('clean', function () {
// Компиляция стилей // Компиляция стилей
gulp.task('style', function () { gulp.task('style', function () {
console.log('---------- Компиляция стилей'); console.log('---------- Компиляция стилей');
return gulp.src(lists.css) return gulp.src('./src/css/style.css')
.pipe(gulpIf(isDev, sourcemaps.init())) .pipe(gulpIf(isDev, sourcemaps.init()))
.pipe(debug({title: "Style:"})) .pipe(debug({title: "Style:"}))
.pipe(postcss([ .pipe(postcss([
customProperties({preserve: true}), // customProperties({preserve: true}),
// autoprefixer({browsers: ['last 2 version']}), atImport({resolve: function(id, basedir, importOptions){return basedir+id.replace(/^\.\/src\/css/,'');}}),
autoprefixer({browsers: ['last 2 version']}),
// mqpacker({ // mqpacker({
// sort: true // sort: true
// }), // }),
......
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
"build": "cross-env NODE_ENV=production npm start build" "build": "cross-env NODE_ENV=production npm start build"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.7.7",
"del": "^2.2.2", "del": "^2.2.2",
"gulp": "^3.9.1", "gulp": "^3.9.1",
"gulp-cleancss": "^0.2.2", "gulp-cleancss": "^0.2.2",
...@@ -55,6 +56,7 @@ ...@@ -55,6 +56,7 @@
"gulp-sequence": "^0.4.6", "gulp-sequence": "^0.4.6",
"gulp-size": "^2.1.0", "gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.4.1", "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 {
}
/** @import url(./src/css/variables.css);
* ВНИМАНИЕ! @import url(./src/blocks/page-header/page-header.css);
* Список подключений из папки блоков при старте автоматизации сверяется со @import url(./src/blocks/page-footer/page-footer.css);
* списком используемых блоков в ./package.json и если там указаны какие-либо @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);
@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);
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