Обязательно добавьте поддержку editorconfig в ваш редактор кода.
npm i # установить зависимости
npm start # запустить сервер разработки (остановить: Ctrl+C)
npm build # запустить production-сборку проекта
#-----------------------------------------------------------------------
# проверка кода
npm run bemlint # проверить html-файлы папки build на соответствие BEM
npm run puglint # проверить pug-файлы
npm run stylelint # проверить scss-файлы
npm lint-staged # проверка файлов перед отправкой коммита
#-----------------------------------------------------------------------
# скрипты для задач, которые запускаются при старте сервера разработки,
# но не включены в watcher (или могут быть отлкючены в настройках),
# в виду редкой надобности. На случай, если по ходу работы нужно
# что-то добавить/убрать без перезапуска сервера
npm run favicon # пересобрать фавиконки
npm run fonts # пересобрать шрифты
npm run vendors # пересобрать vendors.min.js
npm run pngSprite # пересобрать png-спрайт
npm run svgSprite # пересобрать svg-спрайт
#-----------------------------------------------------------------------
# дополнительно
npm run zip # создание zip-архива проекта
npm run ftp # отправка проекта на ftp (настройки в settings.js)
Перед коммитом происходит автопроверка файлов. Если проверка выявила ошибки, они будут показаны в терминале.
- Sass (SCSS)
- PostCSS
- Pug (Jade)
- Stylelint
- ESLint
- pug-lint
- Prettier
- Babel
- gulp.spritesmith
- gulp-svg-sprite
- gitPages
Файл settings.js
содержит глобальные настройки проекта:
addAssets — дополнительные файлы проекта
usePug — использовать pug, заместо html (по умолчанию:
true
)
- copyAssets — отключает копирование дополнительных файлов проекта
- processJs — отключает создание
/js/script.min.js
и отслеживание изменений в js-файлах- copyJsVendors — отключает обработку дополнительных js-модулей и создание
/js/vendors.min.js
приprocessJs
= false
иcopyJsVendors
= false
папка/js
не создается
Все шрифты лежат в папке /fonts
.
Конвертер шрифтов: https://www.fontsquirrel.com/tools/webfont-generator или google-webfonts-helper: https://google-webfonts-helper.herokuapp.com/fonts
- 100 — Thin (Hairline)
- 200 — Extra Light (Ultra Light)
- 300 — Light
- 400 — Regular (Normal)
- 500 — Medium
- 600 — Semi Bold (Demi Bold)
- 700 — Bold
- 800 — Extra Bold (Ultra Bold)
- 900 — Black (Heavy)
Модуль gh-pages
для публикации результатов верстки уже установлен
npx gulp deploy # инициализация
npm start deploy # отправка последнего коммита
- Как работать с CSS-препроцессорами и БЭМ
- Шпаргалка по bash
- Шпаргалка по консольным командам Git
- Шпаргалка ниндзя Sublime Text 3
- Sublime Text 3 для работы с фронтэндом
- Шпаргалка по подключению gh-pages к проекту
- gulp-file-include
- gulp-webp-html-nosvg
- gulp-version-number
- gulp-replace
- gulp-notify
- gulp-plumber
- bemlint
- gulp-pug
- pug-lint
- sass
- gulp-sass
- gulp-clean-css
- gulp-sourcemaps
- gulp-webpcss
- autoprefixer
- normalize.css
- gulp-postcss
- postcss-flexbugs-fixes
- postcss-animation
- stylelint-config-prettier,
- stylelint-config-prettier-scss
- stylelint-config-standard-scss
- stylelint-order
- stylelint-prettier
- stylelint-selector-bem-pattern
- gulp-group-css-media-queries
- webp-converter@2.2.3
- webpack
- webpack-stream
- gulp-eslint
- @babel/eslint-parser
- babel-eslint
- eslint-config-prettier
- eslint-plugin-prettier
- gulp-concat
- fs
- gulp-fonter-fix
- gulp-ttf2woff2
- gulp-webp
- gulp-imagemin
- gulp.spritesmith
- gulp-svg-sprite
- gulp-zip
- vinyl-ftp
- del
- gulp-newer
- gulp-if
- gulp-util
- vinyl-buffer
- merge-stream
- husky
- lint-staged
- @htmlacademy/editorconfig-cli
- gulp-pages
- path