Skip to content

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

Убил папку шритов, дописал readme

parent 4fcc6cde
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 97 deletions
README.md
View file @ b6ffb269
# Проект с gulp
<table><thead>
<tr>
<th>Команда</th>
<th>Результат</th>
</tr>
</thead><tbody>
<tr>
<td width="22%"><code>npm i</code></td>
<td>Установить зависимости</td>
</tr>
<tr>
<td><code>npm start</code></td>
<td>Запустить сборку, сервер и слежение за файлами</td>
</tr>
<tr>
<td><code>port=3004 npm start</code></td>
<td>Запустить сборку, сервер (на указанном порту) и слежение за файлами</td>
</tr>
<tr>
<td><code>npm start ЗАДАЧА</code></td>
<td>Запустить задачу с названием ЗАДАЧА (список задач в <code>gulpfile.js</code>)</td>
</tr>
<tr>
<td><code>npm run build</code></td>
<td>Сборка проекта без карт кода (минифицированый вид, как результат работы)</td>
</tr>
<tr>
<td><code>npm run deploy</code></td>
<td>Сборка проекта без карт кода и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в <code>package.json</code>)</td>
</tr>
<tr>
<td><code>npm test</code></td>
<td>и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в <code>package.json</code>)</td>
</tr>
</tbody></table>
<table>
<thead>
<tr>
<th>Команда</th>
<th>Результат</th>
</tr>
</thead>
<tbody>
<tr>
<td width="22%"><code>npm i</code></td>
<td>Установить зависимости</td>
</tr>
<tr>
<td><code>npm start</code></td>
<td>Запустить сборку, сервер и слежение за файлами</td>
</tr>
<tr>
<td><code>port=3004 npm start</code></td>
<td>Запустить сборку, сервер (на указанном порту) и слежение за файлами</td>
</tr>
<tr>
<td><code>npm start ЗАДАЧА</code></td>
<td>Запустить задачу с названием ЗАДАЧА (список задач в <code>gulpfile.js</code>)</td>
</tr>
<tr>
<td><code>npm run build</code></td>
<td>Сборка проекта без карт кода (минифицированый вид, как результат работы)</td>
</tr>
<tr>
<td><code>npm run deploy</code></td>
<td>Сборка проекта без карт кода и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в <code>package.json</code>)</td>
</tr>
</tbody>
</table>
## Парадигма
- Используется именование классов, файлов и переменных по БЭМ.
- Каждый БЭМ-блок в своей папке внутри `/src/blocks/` (less, js, картинки, разметка; обязателен только less-файл).
- Есть глобальные файлы: css, js, шрифты, картинки, less-файлы (переменные, глобальная стилизация).
- Есть диспетчер подключений `/src/less/style.less`, если в нем импортирован less-файл какого-либо блока, этот блок считается используемым (обрабатывается его js и доп. файлы).
- Список использованных в проекте БЭМ-блоков и оп. файлов указан в `package.json`.
- Каждый БЭМ-блок в своей папке внутри `/src/blocks/` (стили, js, картинки, разметка; обязателен только стилевой файл).
- Есть глобальные файлы: стилевые, js, шрифты, картинки.
- Диспетчер подключения стилей `/src/scss/style.scss` генерируется автоматически при старте любой gulp-задачи.
- Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include). А можно и не использовать.
- **Перед коммитом происходит проверка `.less`-файлов** на соответствие правилам Stylelint (см. `.stylelintrc` в корне проекта). Если выявлены ошибки, коммит не будет создан.
### Блоки
Каждый блок лежит в `/src/blocks/` в своей папке. Каждый блок — как минимум, папка и одноимённый less-файл.
Каждый блок лежит в `/src/blocks/` в своей папке. Каждый блок — как минимум, папка и одноимённый scss-файл.
Возможное содержимое блока:
......@@ -59,60 +58,82 @@
demo-block/ # Папка блока
img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки
some-folder/ # Какая-то сторонняя папка, не обрабатываемые автоматикой
demo-block.less # Главный стилевой файл блока
demo-block--mod.less # Отдельный файл БЭМ-модификатора блока
demo-block.scss # Главный стилевой файл блока
demo-block--mod.scss # Отдельный файл БЭМ-модификатора блока
demo-block.js # Главный js-файл блока
demo-block--mod.js # js-файл для отдельного БЭМ-модификатора блока
demo-block.html # Варианты разметки (как документация блока или как вставляемый микрошаблонизатором фрагмент)
demo-block.css # Добавочный css (копируется как отдельный файл в `build/css`)
readme.md # Какое-то пояснение
```
### Удобное создание нового блока
```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 new-block js img # создаст папку блока, new-block.html, new-block.less, new-block.js, подпапку img/
node createBlock.js block # создаст только папку блока, block.html и block.scss
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 img # создаст папку блока, new-block.html, new-block.scss, new-block.js, подпапку img/
```
По умолчанию будут созданы `.html` и `.less` файлы, в них будет записан стартовый контент.
Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.
После создания блока, в диспетчер подключений будет дописана (в самый низ) строка импорта стилевого файла.
## Подключение блоков
Если в диспетчере подключений (файле `./src/less/style.less`):
```less
@import './src/blocks/demo-block/demo-block.less';
Настройки подключаемых файлов указаны в `./package.json`, в секции `configProject`:
```json
"blocks": {
"page-header": [],
"page-footer": [
"__extra-element",
"--extra-modifier"
]
},
"addCssBefore": [
"./src/scss/variables.scss"
],
"addCssAfter": [
"./src/scss/print.scss"
],
"addJsBefore": [
"./src/js/jquery.3.1.1.min.js"
],
"addJsAfter": [
"./src/js/global-script.js"
],
"addImages": [
"./src/img/"
],
```
То указанный файл будет взят в компиляцию стилей, а так же:
- в обработку будет взят js-файл блока: `./src/blocks/demo-block/demo-block.js` (если существует и не пустой, будет конкатенирован с прочими js-файлами и углифицирован)
- в обработку будет взят css-файл блока: `./src/blocks/demo-block/demo-block.css` (если существует и не пустой, будет скопирован в папку сборки и минифицирован)
- в обработку будут добавлены все картинки блока: `./src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
При указанной записи в обработку будут взяты следующие папки и файлы:
Если в диспетчере подключений:
```
@import './src/blocks/demo-block/demo-block.less';
@import './src/blocks/demo-block/demo-block--mod.less';
```bash
css:
[ './src/scss/variables.scss',
'./src/blocks/page-header/page-header.scss',
'./src/blocks/page-footer/page-footer.scss',
'./src/blocks/page-footer/page-footer__extra-element.scss',
'./src/blocks/page-footer/page-footer--extra-modifier.scss',
'./src/scss/print.scss' ],
js:
[ './src/js/jquery.3.1.1.min.js',
'./src/blocks/page-header/page-header.js',
'./src/blocks/page-footer/page-footer.js',
'./src/blocks/page-footer/page-footer__extra-element.js',
'./src/blocks/page-footer/page-footer--extra-modifier.js',
'./src/js/global-script.js' ],
img:
[ './src/img/',
'./src/blocks/page-header/img',
'./src/blocks/page-footer/img' ]
```
То указанные файлы будет взяты в компиляцию стилей, а так же:
- в обработку будет взят js-файл блока: `./src/blocks/demo-block/demo-block.js` (если существует и не пустой, будет конкатенирован с прочими js-файлами и углифицирован)
- в обработку будет взят js-файл блока: `./src/blocks/demo-block/demo-block--mod.js` (если существует и не пустой, будет конкатенирован с прочими js-файлами и углифицирован)
- в обработку будет взят css-файл блока: `./src/blocks/demo-block/demo-block.css` (если существует и не пустой, будет скопирован в папку сборки и минифицирован)
- в обработку будет взят css-файл блока: `./src/blocks/demo-block/demo-block--mod.css` (если существует и не пустой, будет скопирован в папку сборки и минифицирован)
- в обработку будут добавлены все картинки блока: `./src/blocks/demo-block/img/*.{jpg,jpeg,gif,png,svg}` (если в папке блока существует подпапка `img/`)
## Назначение папок
......@@ -122,11 +143,10 @@ build/ # Сюда собирается проект, здесь раб
src/ # Исходные файлы
_include/ # - фрагменты html для самого верха (секция head) и самого низа (перед закрывающим body) страницы
blocks/ # - блоки (компоненты) проекта
css/ # - глобальные css-файлы (будут скопированы только если существует и не пустые)
fonts/ # - шрифты проекта (будут скопированы в папку сборки, подпапку fonts/)
img/ # - глобальные картинки (будут обработаны только из корня этой папки, подпапки игнорируются)
js/ # - глобальный js-файл (обработается только если существует и не пустой), фреймворки (только копируются, могут быть подключены вручную)
less/ # - диспетчер подключений и глобальные стили
css/ # - можно положить добавочные css-файлы
img/ # - можно положить добавочные картинки
js/ # - можно положить добавочные js-файлы
scss/ # - папка с диспетчером подключений стилей и глобальными файлами
index.html # - главная страница проекта
```
......@@ -134,4 +154,4 @@ src/ # Исходные файлы
## Комментирование для разработчиков
Для разметочных файлов можно использовать комментарии вида `<!--DEV Комментарий -->` — такие комментарии не попадут в собранный html.
Для html-файлов можно использовать комментарии вида `<!--DEV Комментарий -->` — такие комментарии не попадут в собранный html.
gulpfile.js
View file @ b6ffb269
......@@ -21,7 +21,7 @@ const del = require('del');
let pjson = require('./package.json');
let dirs = pjson.configProject.dirs;
let lists = getFilesList(pjson.configProject);
console.log('---------- Файлы и папки, взятые в работу:');
// console.log('---------- Файлы и папки, взятые в работу:');
console.log(lists);
// Запишем стилевой файл диспетчер подключений
......
package.json
View file @ b6ffb269
......@@ -35,13 +35,14 @@
}
},
"scripts": {
"test": "stylelint \"src/**/*.less\"",
"test": "stylelint \"src/**/*.scss\"",
"start": "gulp",
"deploy": "cross-env NODE_ENV=production ./node_modules/.bin/gulp build && cross-env ./node_modules/.bin/gulp deploy",
"build": "cross-env NODE_ENV=production npm start build"
},
"devDependencies": {
"autoprefixer": "^6.7.7",
"cross-env": "^3.2.4",
"css-mqpacker": "^5.0.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
......
src/fonts/generator_config.txt deleted 100755 → 0
View file @ 4fcc6cde
# Font Squirrel Font-face Generator Configuration File
# Upload this file to the generator to recreate the settings
# you used to create these fonts.
{"mode":"expert","formats":["woff"],"tt_instructor":"default","fix_gasp":"xy","fix_vertical_metrics":"Y","metrics_ascent":"","metrics_descent":"","metrics_linegap":"","add_spaces":"Y","add_hyphens":"Y","fallback":"none","fallback_custom":"100","options_subset":"advanced","subset_custom":"!\"#$%&'()*+,-.\/0123456789:;<=>?@ABCDEFGH IJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~\u00a8\u00a9\u00ab\u00ae\u00b4\u00b8\u00bb\u02c6\u02da\u02dc\u0401\u0410\u0411\u0412\u0413\u0414\u0415\u0416\u0417\u0418\u0419\u041a\u041b\u041c\u041d\u041e\u041f\u0420\u0421\u0422\u0423\u0424\u0425\u0426\u0427\u0428\u0429\u042a\u042b\u042c\u042d\u042e\u042f\u0430\u0431\u0432\u0433\u0434\u0435\u0436\u0437\u0438\u0439\u043a\u043b\u043c\u043d\u043e\u043f\u0440\u0441\u0442\u0443\u0444\u0445\u0446\u0447\u0448\u0449\u044a\u044b\u044c\u044d\u044e\u044f\u0451","subset_custom_range":"","subset_ot_features_list":"","base64":"Y","css_stylesheet":"font.css","filename_suffix":"","emsquare":"2048","spacing_adjustment":"0","rememberme":"Y"}
\ No newline at end of file
src/fonts/readme.md deleted 100644 → 0
View file @ 4fcc6cde
Файлы шрифтов из этой папки копируются в папку сборки.
Предпочтительно использовать [fontsquirell](http://www.fontsquirrel.com/tools/webfont-generator) или [jaicab.com/localFont/](http://jaicab.com/localFont/) для создания CSS со шрифтами.
Символы, которые имеет смысл брать в шрифт:
` !"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~¢£¥¨©«®´¸»ˆ˚˜ЁАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяё‐‑‒–—―‘’‚“”„…‰‹›€™`
Приложен файл конфигурации для [fontsquirrel.com](http://www.fontsquirrel.com/tools/webfont-generator)
src/scss/style.scss
View file @ b6ffb269
......@@ -3,8 +3,3 @@
* Не пишите сюда ничего вручную, все такие правки будут потеряны.
* Читайте ./README.md для понимания.
*/
@import "./src/scss/variables.scss";
@import "./src/blocks/page-header/page-header.scss";
@import "./src/blocks/page-footer/page-footer.scss";
@import "./src/scss/print.scss";
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