Commit 2a343e3d authored by Nikolay Gromov's avatar Nikolay Gromov

Поправил инструмент создания блоков

parent 1b7eb1f3
...@@ -70,12 +70,12 @@ demo-block/ # Папка блока ...@@ -70,12 +70,12 @@ demo-block/ # Папка блока
### Удобное создание нового блока ### Удобное создание нового блока
Предусмотрена команда бля быстрого создания файловой структуры нового блока.
```bash ```bash
# формат: node createBlock.js [имя блока] [доп. расширения через пробел] # формат: node createBlock.js [имя блока] [доп. расширения через пробел]
node createBlock.js block # создаст только папку блока, block.html и block.scss node createBlock.js block # создаст папку блока, block.html, block.scss и подпапку img/ для этого блока
node createBlock.js new-block js pug # создаст папку блока, new-block.html, new-block.scss, new-block.js, new-block.pug node createBlock.js new-block js pug # создаст папку блока, new-block.html, new-block.scss, new-block.js, new-block.pug и подпапку img/ для этого блока
node createBlock.js new-block js img # создаст папку блока, new-block.html, new-block.scss, new-block.js, подпапку img/
``` ```
Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют. Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.
......
...@@ -6,18 +6,18 @@ ...@@ -6,18 +6,18 @@
const fs = require('fs'); // будем работать с файловой системой const fs = require('fs'); // будем работать с файловой системой
const pjson = require('./package.json'); // получим настройки из package.json const pjson = require('./package.json'); // получим настройки из package.json
const dirs = pjson.config.directories; // отдельно имеем объект с директориями (где лежаи папка с блоками) const dirs = pjson.configProject.dirs; // отдельно имеем объект с директориями
const mkdirp = require('mkdirp'); // зависимость const mkdirp = require('mkdirp'); // зависимость
let blockName = process.argv[2]; // получим имя блока let blockName = process.argv[2]; // получим имя блока
let defaultExtensions = ['less', 'html']; // расширения по умолчанию let defaultExtensions = ['scss', 'html', 'img']; // расширения по умолчанию
let extensions = uniqueArray(defaultExtensions.concat(process.argv.slice(3))); // добавим введенные при вызове расширения (если есть) let extensions = uniqueArray(defaultExtensions.concat(process.argv.slice(3))); // добавим введенные при вызове расширения (если есть)
// Если есть имя блока // Если есть имя блока
if(blockName) { if(blockName) {
let dirPath = dirs.source + '/blocks/' + blockName + '/'; // полный путь к создаваемой папке блока let dirPath = dirs.srcPath + dirs.blocksDirName + '/' + blockName + '/'; // полный путь к создаваемой папке блока
mkdirp(dirPath, function(err){ // создаем mkdirp(dirPath, function(err){ // создаем
// Если какая-то ошибка — покажем // Если какая-то ошибка — покажем
if(err) { if(err) {
...@@ -26,73 +26,40 @@ if(blockName) { ...@@ -26,73 +26,40 @@ if(blockName) {
// Нет ошибки, поехали! // Нет ошибки, поехали!
else { else {
console.log('[NTH] Создание папки ' + dirPath + ' (создана, если ещё не существует)'); console.log('[NTH] Создание папки ' + dirPath + ' (если отсутствует)');
// Читаем файл диспетчера подключений
let connectManager = fs.readFileSync(dirs.source + '/less/style.less', 'utf8');
// Делаем из строк массив, фильтруем массив, оставляя только строки с незакомментированными импортами
let fileSystem = connectManager.split('\n').filter(function(item) {
if(/^(\s*)@import/.test(item)) return true;
else return false;
});
// Обходим массив расширений и создаем файлы, если они еще не созданы // Обходим массив расширений и создаем файлы, если они еще не созданы
extensions.forEach(function(extention){ extensions.forEach(function(extention){
let filePath = dirPath + blockName + '.' + extention; // полный путь к создаваемому файлу let filePath = dirPath + blockName + '.' + extention; // полный путь к создаваемому файлу
let fileContent = ''; // будущий контент файла let fileContent = ''; // будущий контент файла
let LESSfileImport = ''; // конструкция импорта будущего LESS
let fileCreateMsg = ''; // будущее сообщение в консоли при создании файла let fileCreateMsg = ''; // будущее сообщение в консоли при создании файла
// Если это LESS // Если это SCSS
if(extention == 'less') { if(extention == 'scss') {
LESSfileImport = '@import \'' + dirs.source + '/blocks/' + blockName + '/' + blockName + '.less\';'; fileContent = '// В этом файле должны быть стили только для БЭМ-блока ' + blockName + ', его элементов, \n//модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...\n// Не пишите здесь другие селекторы.\n\n.' + blockName + ' {\n \n}\n';
fileContent = '// Для импорта в диспетчер подключений: ' + LESSfileImport + '\n\n@import \'../../less/variables.less\'; // только для удобства обращения к переменным\n\n\n.' + blockName + ' {\n \n}\n'; // fileCreateMsg = '';
// fileCreateMsg = '[NTH] Для импорта стилей: ' + LESSfileImport;
// Создаем регулярку с импортом
let reg = new RegExp(LESSfileImport, '');
// Создадим флаг отсутствия блока среди импортов
let impotrtExist = false;
// Обойдём массив и проверим наличие импорта // Добавим созданный файл в ./package.json
for (var i = 0, j=fileSystem.length; i < j; i++) { let hasThisBlock = false;
if(reg.test(fileSystem[i])) { for (let block in pjson.configProject.blocks) {
impotrtExist = true; if(block === blockName) {
hasThisBlock = true;
break; break;
} }
} }
if(!hasThisBlock) {
// Если флаг наличия импорта по-прежнему опущен, допишем импорт pjson.configProject.blocks[blockName] = [];
if(!impotrtExist) { let newPackageJson = JSON.stringify(pjson, "", 2);
// Открываем файл fs.writeFileSync('./package.json', newPackageJson);
fs.open(dirs.source + '/less/style.less', 'a', function(err, fileHandle) { fileCreateMsg = '[NTH] Подключение блока добавлено в package.json';
// Если ошибок открытия нет...
if (!err) {
// Запишем в конец файла
fs.write(fileHandle, LESSfileImport + '\n', null, 'utf8', function(err, written) {
if (!err) {
console.log('[NTH] В диспетчер подключений ('+ dirs.source + '/less/style.less) записано: ' + LESSfileImport);
} else {
console.log('[NTH] ОШИБКА записи в '+ dirs.source + '/less/style.less: ' + err);
}
});
} else {
console.log('[NTH] ОШИБКА открытия '+ dirs.source + '/less/style.less: ' + err);
}
});
}
else {
console.log('[NTH] Импорт НЕ прописан в '+ dirs.source + '/less/style.less (он там уже есть)');
} }
} }
// Если это HTML // Если это HTML
else if(extention == 'html') { else if(extention == 'html') {
fileContent = '<!--DEV\n\nНужно убрать пробел между @-ами:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n-->\n<div class="' + blockName + '">content</div>\n'; fileContent = '<!--DEV\n\nДля использования этого файла как шаблона:\n\n@ @include(\'blocks/' + blockName + '/' + blockName + '.html\')\n\n(Нужно убрать пробел между символами @)\nПодробнее: https://www.npmjs.com/package/gulp-file-include-->\n\n<div class="' + blockName + '">content</div>\n';
fileCreateMsg = '[NTH] Для вставки разметки: @@include(\'blocks/' + blockName + '/' + blockName + '.html\') Подробнее: https://www.npmjs.com/package/gulp-file-include'; // fileCreateMsg = '';
} }
// Если это JS // Если это JS
...@@ -106,11 +73,11 @@ if(blockName) { ...@@ -106,11 +73,11 @@ if(blockName) {
if(fileExist(imgFolder) === false) { if(fileExist(imgFolder) === false) {
mkdirp(imgFolder, function (err) { mkdirp(imgFolder, function (err) {
if (err) console.error(err) if (err) console.error(err)
else console.log('[NTH] Папка создана: ' + imgFolder) else console.log('[NTH] Создание папки: ' + imgFolder + ' (если отсутствует)')
}); });
} }
else { else {
console.log('[NTH] Папка НЕ создана (уже существует) ') console.log('[NTH] Папка '+imgFolder+' НЕ создана (уже существует) ')
} }
} }
......
.page-header {
display: flex;
color: var(--gray);
}
.page-header { // В этом файле должны быть стили только для БЭМ-блока page-header, его элементов,
//модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Не пишите здесь другие селекторы.
.page-header {
} }
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