Skip to content

K
kpp
Commit b680652e authored by Nikolay Gromov's avatar Nikolay Gromov
Browse files
Options

Начал организовывать новую структуру

parent 9f635db9
Hide whitespace changes
Inline Side-by-side
Showing with 100 additions and 173 deletions
gulpfile.js
View file @ b680652e
......@@ -4,52 +4,23 @@
const fs = require('fs');
const gulp = require('gulp');
const gulpSequence = require('gulp-sequence');
const del = require('del');
const postcss = require('gulp-postcss');
const postcssMediaVariables = require('postcss-media-variables');
const customProperties = require("postcss-custom-properties")
const notify = require('gulp-notify');
const gulpIf = require('gulp-if');
const debug = require('gulp-debug');
const sourcemaps = require('gulp-sourcemaps');
const cleanss = require('gulp-cleancss');
const rename = require('gulp-rename');
const size = require('gulp-size');
const del = require('del');
// Получим настройки проекта из package.json
let pjson = require('./package.json');
let dirs = pjson.configProject.dirs;
let blocksObject = pjson.configProject.blocks;
// Обойдем импорты диспетчера подключений, сформируем массив импортов блоков
let styleFilePath = dirs.srcPath + 'css/style.css';
let styleFileContent = fs.readFileSync(styleFilePath, 'utf8');
let blockRegExp = new RegExp('/'+dirs.blocksDirName+'/', 'i');
let styleFileImportsArray = styleFileContent.split('\n').filter(function(item) {
if(/^(\s*)@import/.test(item) && blockRegExp.test(item)) return true;
else return false;
});
// console.log(styleFileImportsArray);
// Обойдем объект с необходимыми блоками, поищем их импорты в массиве импортов
let newImports = '';
for (let blockName in blocksObject) {
if(blocksObject[blockName].length) {
newImports += getNeedImport(blockName, blockName);
blocksObject[blockName].forEach(function(elementName) {
newImports += getNeedImport(blockName, blockName+elementName);
});
}
else {
newImports += getNeedImport(blockName, blockName);
}
}
function getNeedImport(blockName, fileName){
let hasImport = false;
// console.log('test '+blockName+'/'+fileName+'.css ');
for (var i = 0; i < styleFileImportsArray.length; i++) {
let blockImportRegExp = new RegExp('/'+blockName+'/'+fileName+'.css', 'i');
if(blockImportRegExp.test(styleFileImportsArray[i])) {
hasImport = true;
break;
}
}
if(!hasImport) return '@import url('+dirs.srcPath+dirs.blocksDirName+'/'+blockName+'/'+fileName+'.css);\n'
else return '';
}
// console.log(newImports);
let lists = getFilesList(pjson.configProject);
console.log('---------- Файлы и папки, взятые в работу:');
console.log(lists);
// Запуск `NODE_ENV=production npm start [задача]` приведет к сборке без sourcemaps
const isDev = !process.env.NODE_ENV || process.env.NODE_ENV == 'dev';
......@@ -62,3 +33,80 @@ gulp.task('clean', function () {
'!' + dirs.buildPath + '/readme.md'
]);
});
// Компиляция стилей
gulp.task('style', function () {
console.log('---------- Компиляция стилей');
return gulp.src(lists.css)
.pipe(gulpIf(isDev, sourcemaps.init()))
.pipe(debug({title: "Style:"}))
.pipe(postcss([
customProperties({preserve: true}),
// autoprefixer({browsers: ['last 2 version']}),
// mqpacker({
// sort: true
// }),
]))
.on('error', notify.onError(function(err){
return {
title: 'Styles compilation error',
message: err.message
}
}))
.pipe(gulpIf(!isDev, cleanss()))
.pipe(rename('style.min.css'))
.pipe(gulpIf(isDev, sourcemaps.write('/')))
.pipe(size({
title: 'Размер',
showFiles: true,
showTotal: false,
}))
.pipe(gulp.dest(dirs.buildPath + '/css'));
// .pipe(browserSync.stream());
});
/**
* Вернет объект с обрабатываемыми файлами и папками
* @param {object}
* @return {object}
*/
function getFilesList(config){
let res = {
'css': [],
'js': [],
'img': [],
};
// CSS
for (let blockName in config.blocks) {
res.css.push(config.dirs.srcPath + config.dirs.blocksDirName + '/' + blockName + '/' + blockName + '.css');
if(config.blocks[blockName].length) {
config.blocks[blockName].forEach(function(elementName) {
res.css.push(config.dirs.srcPath + config.dirs.blocksDirName + '/' + blockName + '/' + blockName + elementName + '.css');
});
}
}
res.css = res.css.concat(config.addCssAfter);
res.css = config.addCssBefore.concat(res.css);
// JS
for (let blockName in config.blocks) {
res.js.push(config.dirs.srcPath + config.dirs.blocksDirName + '/' + blockName + '/' + blockName + '.js');
if(config.blocks[blockName].length) {
config.blocks[blockName].forEach(function(elementName) {
res.js.push(config.dirs.srcPath + config.dirs.blocksDirName + '/' + blockName + '/' + blockName + elementName + '.js');
});
}
}
res.js = res.js.concat(config.addJsAfter);
res.js = config.addJsBefore.concat(res.js);
// Images
for (let blockName in config.blocks) {
res.img.push(config.dirs.srcPath + config.dirs.blocksDirName + '/' + blockName + '/img');
}
res.img = config.addImages.concat(res.img);
return res;
}
package.json
View file @ b680652e
......@@ -19,13 +19,13 @@
"addCssBefore": [
"./src/css/variables.css"
],
"addCssAfter": [
"addCssAfter": [
"./src/css/print.css"
],
"addJsBefore": [
"./src/js/jquery.3.1.1.min.js"
],
"addJsAfter": [
"addJsAfter": [
"./src/js/global-script.js"
],
"addImages": [
......@@ -46,8 +46,15 @@
"devDependencies": {
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-cleancss": "^0.2.2",
"gulp-debug": "^3.1.0",
"gulp-if": "^2.0.2",
"gulp-notify": "^3.0.0",
"gulp-postcss": "^6.3.0",
"gulp-rename": "^1.2.2",
"gulp-sequence": "^0.4.6",
"postcss-media-variables": "^2.0.0"
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.4.1",
"postcss-custom-properties": "^5.0.2"
}
}
src/css/variables.css
View file @ b680652e
:root {
/* Базовые цвета https://colorscheme.ru/color-converter.html */
--black: hsl(0, 0%, 0%);
--gray-darkest: hsl(0, 0%, 10%);
--gray-darker: hsl(0, 0%, 20%);
--gray-darken: hsl(0, 0%, 30%);
--gray-dark: hsl(0, 0%, 40%);
--gray: hsl(0, 0%, 50%);
--gray-light: hsl(0, 0%, 60%);
--gray-lighten: hsl(0, 0%, 70%);
--gray-lighter: hsl(0, 0%, 80%);
--gray-lightest: hsl(0, 0%, 90%);
--white: hsl(0, 0%, 100%);
--color-main: hsl(208, 98%, 43%);
--color-success: hsl(120, 39%, 54%);
--color-danger: hsl(2, 64%, 58%);
/* Семантические цвета */
--gray: hsl(0, 0%, 10%);
--text-color: var(--gray-darkest, hsl(0, 0%, 10%));
--text-color--muted: var(--gray, hsl(0, 0%, 50%));
--body-bg: var(--white, #fff);
--link-color: var(--color-main, hsl(208, 98%, 43%));
--link-color--hover: var(--color-main, hsl(208, 98%, 43%));
--border-color: var(--gray-light, hsl(0, 0%, 60%));
/* Базовая типографика */
--font-size: 14px;
--font-size--h1: 2.25em;
--font-size--h2: 1.875em;
--font-size--h3: 1.5em;
--font-size--h4: 1.25em;
--font-size--h5: 1em;
--font-size--h6: 1em;
--font-size--small: 0.75em;
--line-height: 1.375em;
--font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;
--font-family--serif: 'Georgia', 'Times New Roman', 'Times', serif;
--font-family--monospace: 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
--font-family--headings: var(--font-family, inherit);
/* Breakepoints и @media */
--screen-sm: 600px;
@custom-media --screen-sm (min-width: var(--screen-sm));
@custom-media --screen-sm-2-md (min-width: var(--screen-sm)) and (max-width: calc(var(--screen-sm) - 1));
@custom-media --screen-before-sm (max-width: calc(var(--screen-sm) - 1));
/* --screen-md: 900px; */
/* @custom-media --screen-md (min-width: 900px); */
/* @custom-media --screen-md-max (max-width: 899px); */
/* --screen-lg: 1200px; */
/* @custom-media --screen-lg (min-width: 1200px); */
/* @custom-media --screen-lg-max (max-width: 1199px); */
/* --screen-xl: 1800px; */
/* @custom-media --screen-xl (min-width: 1800px); */
/* @custom-media --screen-xl-max (max-width: 1799px); */
}
/*
// Модульная сетка
@grid-columns: 12;
@grid-gutter-width: 30px;
// Ширины
@screen-xs: 0;
@screen-sm: 480px;
@screen-md: 768px;
@screen-lg: 992px;
@screen-xl: 1200px;
@screen-xxl: 1800px;
@container-sm: 100%;
@container-md: 100%;
@container-lg: @screen-lg - 30;
@container-xl: @screen-xl - 30;
@container-xxl: @screen-xxl - 30;
// Z-index
@z-index-dropdown: 10;
// Формы, кнопки
@field-padding-top: 0.313em;
@field-padding-bottom: 0.313em;
@field-padding-horizontal: 0.438em;
// Разное
@border-radius: 3px;
@opacity: 0.7;
@transition-time: 0.3s;
@shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.3);
*/
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