Skip to content

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

Допил автоматизации

parent 749816e5
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 101 additions and 52 deletions
.stylelintignore
View file @ 94dc6934
# перечисление игнорируемых stylelint-ом файлов
README.md
View file @ 94dc6934
......@@ -2,14 +2,18 @@
ВНИМАНИЕ! Этот проект в разработке (призван систематизировать мои личные наработки из области вёрстки), я добавляю и меняю в нем довольно много всего. Это даже не альфа. Периодически может выглядеть странно и не менее странно работать.
Установка: выполнить в папке проекта: `npm i`.
Установка: `npm i`.
Использование: `npm start` (дабы не ставить глобально 4-ю версию gulp, которая сейчас в альфе). После `npm start` можно через пробел указать задачу. К примеру `npm start less` выполнит только задачу `less` из `gulpfile.js` (полный список задач смотри в `gulpfile.js`).
`port=3004 npm start` — для запуска сервера автообновлений на указанном порту.
Использование: `npm start`. После `npm start` можно через пробел указать задачу. К примеру `npm start less` выполнит только задачу `less` из `gulpfile.js` (полный список задач смотри в `gulpfile.js`).
`npm run build` — сборка проекта без карт кода (минифицированный вид, как результат работы).
`npm run deploy` — сборка проекта без карт кода и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в `package.json`).
`npm test` — запуск проверки `.less`-файлов Stylelint-ом.
`port=3004 npm start` — для запуска сервера автообновлений на указанном порту.
## Парадигма
......@@ -19,6 +23,7 @@
- Есть глобальные файлы: css, js, шрифты, картинки, less-файлы (переменные, глобальная стилизация...).
- Есть диспетчер подключений `/src/less/style.less`. Если в нем импортирован less-файл какого-либо блока, этот блок считается используемым (обрабатывается его js и доп. файлы).
- Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include) — обычное включение разметки мелких файлов внутрь больших файлов с возможностью передавать какие-то данные в мелкие файлы. А можно и не использовать.
- **Перед коммитом происходит проверка `.less`-файлов** на соответствие правилам Stylelint (см. `.stylelintrc` в корне проекта). Если выявлены ошибки, коммит не будет создан, нужно исправить ошибки, переиндексировать файлы и сделать коммит.
......@@ -31,14 +36,13 @@
```bash
demo-block/ # Папка блока
img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки
img_to_bg/ # Изображения, не обрабатываемые автоматикой сборки (имя папки — любое, обрабатываются только изображения из папки img/ внутри папки блока (см. предыдущую строку)
some-folder/ # Какая-то сторонняя папка, не обрабатываемые автоматикой
demo-block.less # Главный стилевой файл блока
demo-block--mod.less # Отдельный файл модификатора блока (если объемный и нужен не на всех проектах)
demo-block--mod.less # Отдельный файл БЭМ-модификатора блока
demo-block.js # Главный js-файл блока
demo-block--mod.js # js-файл для отдельного модификатора блока
demo-block--mod.js # js-файл для отдельного БЭМ-модификатора блока
demo-block.html # Варианты разметки (как документация блока или как вставляемый микрошаблонизатором фрагмент)
demo-block.css # Добавочный css (копируется как отдельный файл в `build/css`)
library.js # Дополнительная js-библиотека, берется в конкатенируемый js-файл проекта (имя любое, в конкатенацию берется перед всеми прочими файлами, повторения ищутся по имени файла)
readme.md # Какое-то пояснение
```
......@@ -47,8 +51,9 @@ demo-block/ # Папка блока
```bash
# формат: node createBlock.js [имя блока] [доп. расширения через пробел]
node createBlock.js block # создаст только папку, block.html и block.less
node createBlock.js new-block js jade # создаст папку, new-block.html, new-block.less, new-block.js, new-block.jade
node createBlock.js block # создаст только папку блока, block.html и block.less
node createBlock.js new-block js jade # создаст папку блока, new-block.html, new-block.less, new-block.js, new-block.jade
node createBlock.js new-block js img # создаст папку блока, new-block.html, new-block.less, new-block.js, подпапку img/
```
По умолчанию будут созданы `.html` и `.less` файлы, в них будет записан стартовый контент.
......@@ -61,9 +66,9 @@ node createBlock.js new-block js jade # создаст папку, new-block.htm
## Подключение блоков
Если в диспетчере подключений (`./src/less/style.less`):
Если в диспетчере подключений (файле `./src/less/style.less`):
```
```less
@import './src/blocks/demo-block/demo-block.less';
```
......@@ -95,8 +100,8 @@ build/ # Сюда собирается проект, здесь раб
src/ # Исходные файлы
_include/ # - фрагменты html для самого верха (секция head) и самого низа (перед закрывающим body) страницы
blocks/ # - блоки (компоненты) проекта
css/ # - глобальный css-файл (будет скопирован только если существует и не пустой)
fonts/ # - шрифты проекта (никак не обрабатываются, см. http://jaicab.com/localFont/)
css/ # - глобальные css-файлы (будут скопированы только если существует и не пустые)
fonts/ # - шрифты проекта (будут скопированы в папку сборки, подпапку fonts/)
img/ # - глобальные картинки (будут обработаны только из корня этой папки, подпапки игнорируются)
js/ # - глобальный js-файл (обработается только если существует и не пустой), фреймворки (только копируются, могут быть подключены вручную)
less/ # - диспетчер подключений и глобальные стили
......
createBlock.js
View file @ 94dc6934
......@@ -10,7 +10,7 @@ const dirs = pjson.config.directories; // отдельно имеем объе
const mkdirp = require('mkdirp'); // зависимость
let blockName = process.argv[2]; // получим имя блока
let defaultExtensions = ['html', 'less']; // расширения по умолчанию
let defaultExtensions = ['less', 'html']; // расширения по умолчанию
let extensions = uniqueArray(defaultExtensions.concat(process.argv.slice(3))); // добавим введенные при вызове расширения (если есть)
// Если есть имя блока
......@@ -49,7 +49,7 @@ if(blockName) {
if(extention == 'less') {
LESSfileImport = '@import \'' + dirs.source + '/blocks/' + blockName + '/' + blockName + '.less\';';
fileContent = '// Для импорта в диспетчер подключений: ' + LESSfileImport + '\n\n@import \'../../less/variables.less\'; // только для удобства обращения к переменным\n\n\n.' + blockName + ' {\n \n}\n';
fileCreateMsg = '[NTH] Для импорта стилей: ' + LESSfileImport;
// fileCreateMsg = '[NTH] Для импорта стилей: ' + LESSfileImport;
// Создаем регулярку с импортом
let reg = new RegExp(LESSfileImport, '');
......@@ -92,7 +92,7 @@ if(blockName) {
// Если это 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';
fileCreateMsg = '[NTH] Для вставки разметки: @@include(\'blocks/' + blockName + '/' + blockName + '.html\') Подробнее: https://www.npmjs.com/package/gulp-file-include';
fileCreateMsg = '[NTH] Для вставки разметки: @@include(\'blocks/' + blockName + '/' + blockName + '.html\') Подробнее: https://www.npmjs.com/package/gulp-file-include';
}
// Если это JS
......@@ -100,8 +100,22 @@ if(blockName) {
fileContent = '// (function(){\n// код\n// }());\n';
}
// Если нужна подпапка для картинок
else if(extention == 'img') {
let imgFolder = dirPath + 'img/';
if(fileExist(imgFolder) === false) {
mkdirp(imgFolder, function (err) {
if (err) console.error(err)
else console.log('[NTH] Папка создана: ' + imgFolder)
});
}
else {
console.log('[NTH] Папка НЕ создана (уже существует) ')
}
}
// Создаем файл, если он еще не существует
if(fileExist(filePath) === false) {
if(fileExist(filePath) === false && extention !== 'img') {
fs.writeFile(filePath, fileContent, function(err) {
if(err) {
return console.log('[NTH] Файл НЕ создан: ' + err);
......@@ -112,7 +126,7 @@ if(blockName) {
}
});
}
else {
else if(extention !== 'img') {
console.log('[NTH] Файл НЕ создан: ' + filePath + ' (уже существует)');
}
});
......
gulpfile.js
View file @ 94dc6934
This diff is collapsed.
src/less/style.less
View file @ 94dc6934
// ВНИМАНИЕ! В этом файле нельзя использовать блочные комментарии (/* ... */), только строчные! (//)
// В этом файле нельзя писать селекторы! Есть несколько глобальных файлов стилей, остальное должно
// быть по принципу БЭМ-блок = отдельный файл!
// быть по принципу БЭМ-блок = отдельный файл. Смотри http://nicothin.github.io/idiomatic-pre-CSS/
@import './src/less/variables.less';
@import './src/less/mixins/mixins.less';
......
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