Skip to content

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

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

parent 4fcc6cde
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 97 deletions
README.md
View file @ b6ffb269
# Проект с gulp # Проект с gulp
<table><thead> <table>
<tr> <thead>
<th>Команда</th> <tr>
<th>Результат</th> <th>Команда</th>
</tr> <th>Результат</th>
</thead><tbody> </tr>
<tr> </thead>
<td width="22%"><code>npm i</code></td> <tbody>
<td>Установить зависимости</td> <tr>
</tr> <td width="22%"><code>npm i</code></td>
<tr> <td>Установить зависимости</td>
<td><code>npm start</code></td> </tr>
<td>Запустить сборку, сервер и слежение за файлами</td> <tr>
</tr> <td><code>npm start</code></td>
<tr> <td>Запустить сборку, сервер и слежение за файлами</td>
<td><code>port=3004 npm start</code></td> </tr>
<td>Запустить сборку, сервер (на указанном порту) и слежение за файлами</td> <tr>
</tr> <td><code>port=3004 npm start</code></td>
<tr> <td>Запустить сборку, сервер (на указанном порту) и слежение за файлами</td>
<td><code>npm start ЗАДАЧА</code></td> </tr>
<td>Запустить задачу с названием ЗАДАЧА (список задач в <code>gulpfile.js</code>)</td> <tr>
</tr> <td><code>npm start ЗАДАЧА</code></td>
<tr> <td>Запустить задачу с названием ЗАДАЧА (список задач в <code>gulpfile.js</code>)</td>
<td><code>npm run build</code></td> </tr>
<td>Сборка проекта без карт кода (минифицированый вид, как результат работы)</td> <tr>
</tr> <td><code>npm run build</code></td>
<tr> <td>Сборка проекта без карт кода (минифицированый вид, как результат работы)</td>
<td><code>npm run deploy</code></td> </tr>
<td>Сборка проекта без карт кода и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в <code>package.json</code>)</td> <tr>
</tr> <td><code>npm run deploy</code></td>
<tr> <td>Сборка проекта без карт кода и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в <code>package.json</code>)</td>
<td><code>npm test</code></td> </tr>
<td>и отправка содержимого папки сборки на GH-pages (для корректного сообщения адреса просмотра введите его в <code>package.json</code>)</td> </tbody>
</tr> </table>
</tbody></table>
## Парадигма ## Парадигма
- Используется именование классов, файлов и переменных по БЭМ. - Используется именование классов, файлов и переменных по БЭМ.
- Каждый БЭМ-блок в своей папке внутри `/src/blocks/` (less, js, картинки, разметка; обязателен только less-файл). - Список использованных в проекте БЭМ-блоков и оп. файлов указан в `package.json`.
- Есть глобальные файлы: css, js, шрифты, картинки, less-файлы (переменные, глобальная стилизация). - Каждый БЭМ-блок в своей папке внутри `/src/blocks/` (стили, js, картинки, разметка; обязателен только стилевой файл).
- Есть диспетчер подключений `/src/less/style.less`, если в нем импортирован less-файл какого-либо блока, этот блок считается используемым (обрабатывается его js и доп. файлы). - Есть глобальные файлы: стилевые, js, шрифты, картинки.
- Диспетчер подключения стилей `/src/scss/style.scss` генерируется автоматически при старте любой gulp-задачи.
- Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include). А можно и не использовать. - Для разметки можно использовать [микрошаблонизацию](https://www.npmjs.com/package/gulp-file-include). А можно и не использовать.
- **Перед коммитом происходит проверка `.less`-файлов** на соответствие правилам Stylelint (см. `.stylelintrc` в корне проекта). Если выявлены ошибки, коммит не будет создан.
### Блоки ### Блоки
Каждый блок лежит в `/src/blocks/` в своей папке. Каждый блок — как минимум, папка и одноимённый less-файл. Каждый блок лежит в `/src/blocks/` в своей папке. Каждый блок — как минимум, папка и одноимённый scss-файл.
Возможное содержимое блока: Возможное содержимое блока:
...@@ -59,60 +58,82 @@ ...@@ -59,60 +58,82 @@
demo-block/ # Папка блока demo-block/ # Папка блока
img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки img/ # Изображения, используемые блоком и обрабатываемые автоматикой сборки
some-folder/ # Какая-то сторонняя папка, не обрабатываемые автоматикой some-folder/ # Какая-то сторонняя папка, не обрабатываемые автоматикой
demo-block.less # Главный стилевой файл блока demo-block.scss # Главный стилевой файл блока
demo-block--mod.less # Отдельный файл БЭМ-модификатора блока demo-block--mod.scss # Отдельный файл БЭМ-модификатора блока
demo-block.js # Главный js-файл блока demo-block.js # Главный js-файл блока
demo-block--mod.js # js-файл для отдельного БЭМ-модификатора блока demo-block--mod.js # js-файл для отдельного БЭМ-модификатора блока
demo-block.html # Варианты разметки (как документация блока или как вставляемый микрошаблонизатором фрагмент) demo-block.html # Варианты разметки (как документация блока или как вставляемый микрошаблонизатором фрагмент)
demo-block.css # Добавочный css (копируется как отдельный файл в `build/css`)
readme.md # Какое-то пояснение readme.md # Какое-то пояснение
``` ```
### Удобное создание нового блока ### Удобное создание нового блока
```bash ```bash
# формат: node createBlock.js [имя блока] [доп. расширения через пробел] # формат: node createBlock.js [имя блока] [доп. расширения через пробел]
node createBlock.js block # создаст только папку блока, block.html и block.less node createBlock.js block # создаст только папку блока, block.html и block.scss
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 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.less, new-block.js, подпапку img/ node createBlock.js new-block js img # создаст папку блока, new-block.html, new-block.scss, new-block.js, подпапку img/
``` ```
По умолчанию будут созданы `.html` и `.less` файлы, в них будет записан стартовый контент.
Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют. Если блок уже существует, файлы не будут затёрты, но создадутся те файлы, которые ещё не существуют.
После создания блока, в диспетчер подключений будет дописана (в самый низ) строка импорта стилевого файла.
## Подключение блоков ## Подключение блоков
Если в диспетчере подключений (файле `./src/less/style.less`): Настройки подключаемых файлов указаны в `./package.json`, в секции `configProject`:
```less ```json
@import './src/blocks/demo-block/demo-block.less'; "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/`)
Если в диспетчере подключений: ```bash
css:
``` [ './src/scss/variables.scss',
@import './src/blocks/demo-block/demo-block.less'; './src/blocks/page-header/page-header.scss',
@import './src/blocks/demo-block/demo-block--mod.less'; './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/ # Сюда собирается проект, здесь раб ...@@ -122,11 +143,10 @@ build/ # Сюда собирается проект, здесь раб
src/ # Исходные файлы src/ # Исходные файлы
_include/ # - фрагменты html для самого верха (секция head) и самого низа (перед закрывающим body) страницы _include/ # - фрагменты html для самого верха (секция head) и самого низа (перед закрывающим body) страницы
blocks/ # - блоки (компоненты) проекта blocks/ # - блоки (компоненты) проекта
css/ # - глобальные css-файлы (будут скопированы только если существует и не пустые) css/ # - можно положить добавочные css-файлы
fonts/ # - шрифты проекта (будут скопированы в папку сборки, подпапку fonts/) img/ # - можно положить добавочные картинки
img/ # - глобальные картинки (будут обработаны только из корня этой папки, подпапки игнорируются) js/ # - можно положить добавочные js-файлы
js/ # - глобальный js-файл (обработается только если существует и не пустой), фреймворки (только копируются, могут быть подключены вручную) scss/ # - папка с диспетчером подключений стилей и глобальными файлами
less/ # - диспетчер подключений и глобальные стили
index.html # - главная страница проекта index.html # - главная страница проекта
``` ```
...@@ -134,4 +154,4 @@ src/ # Исходные файлы ...@@ -134,4 +154,4 @@ src/ # Исходные файлы
## Комментирование для разработчиков ## Комментирование для разработчиков
Для разметочных файлов можно использовать комментарии вида `<!--DEV Комментарий -->` — такие комментарии не попадут в собранный html. Для html-файлов можно использовать комментарии вида `<!--DEV Комментарий -->` — такие комментарии не попадут в собранный html.
gulpfile.js
View file @ b6ffb269
...@@ -21,7 +21,7 @@ const del = require('del'); ...@@ -21,7 +21,7 @@ const del = require('del');
let pjson = require('./package.json'); let pjson = require('./package.json');
let dirs = pjson.configProject.dirs; let dirs = pjson.configProject.dirs;
let lists = getFilesList(pjson.configProject); let lists = getFilesList(pjson.configProject);
console.log('---------- Файлы и папки, взятые в работу:'); // console.log('---------- Файлы и папки, взятые в работу:');
console.log(lists); console.log(lists);
// Запишем стилевой файл диспетчер подключений // Запишем стилевой файл диспетчер подключений
......
package.json
View file @ b6ffb269
...@@ -35,13 +35,14 @@ ...@@ -35,13 +35,14 @@
} }
}, },
"scripts": { "scripts": {
"test": "stylelint \"src/**/*.less\"", "test": "stylelint \"src/**/*.scss\"",
"start": "gulp", "start": "gulp",
"deploy": "cross-env NODE_ENV=production ./node_modules/.bin/gulp build && cross-env ./node_modules/.bin/gulp deploy", "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" "build": "cross-env NODE_ENV=production npm start build"
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "^6.7.7", "autoprefixer": "^6.7.7",
"cross-env": "^3.2.4",
"css-mqpacker": "^5.0.1", "css-mqpacker": "^5.0.1",
"del": "^2.2.2", "del": "^2.2.2",
"gulp": "^3.9.1", "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 @@ ...@@ -3,8 +3,3 @@
* Не пишите сюда ничего вручную, все такие правки будут потеряны. * Не пишите сюда ничего вручную, все такие правки будут потеряны.
* Читайте ./README.md для понимания. * Читайте ./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