Code Monkey home page Code Monkey logo

gulp-scss-starter's Introduction

gulp-scss-starter

License GitHub stars GitHub watchers

🔥 Особенности

  • именование классов по БЭМ
  • используется БЭМ-структура
  • используется препроцессор SCSS
  • используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
  • используется Webpack для сборки JavaScript-модулей
  • используется жёсткий кодгайд
  • используется проверка кода на ошибки перед коммитом

🛠️ Установка

  • установите NodeJS
  • установите глобально:
  • скачайте сборку с помощью Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
  • перейдите в скачанную папку со сборкой: cd gulp-scss-starter
  • введите yarn set version berry
  • скачайте необходимые зависимости: yarn
  • чтобы начать работу, введите команду: yarn run dev (режим разработки)
  • чтобы собрать проект, введите команду yarn run build (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером. Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

📂 Файловая структура

gulp-scss-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore
  • Корень папки:
    • .babelrc.js — настройки Babel
    • .bemrc.js — настройки БЭМ
    • .eslintrc.json — настройки ESLint
    • .gitignore – запрет на отслеживание файлов Git'ом
    • .stylelintrc — настройки Stylelint
    • .stylelintignore – запрет на отслеживание файлов Stylelint'ом
    • .yarnrc.yml – настройка Yarn
    • gulpfile.babel.js — настройки Gulp
    • webpack.config.js — настройки Webpack
    • package.json — список зависимостей
  • Папка src - используется во время разработки:
    • БЭМ-блоки: src/blocks
    • шрифты: src/fonts
    • изображения: src/img
    • JS-файлы: src/js
    • страницы сайта: src/views/pages
    • SCSS-файлы: src/styles
    • HTML-файлы: src/views
    • конфигурационный файл веб-сервера Apache с настройками gzip (сжатие без потерь): src/.htaccess
  • Папка dist - папка, из которой запускается локальный сервер для разработки (при запуске yarn run dev)
  • Папка gulp-tasks - папка с Gulp-тасками

⌨️ Команды

  • yarn run lint:styles - проверить SCSS-файлы. Для VSCode необходимо установить плагин. Для WebStorm или PHPStorm необходимо включить Stylelint в Languages & Frameworks - Style Sheets - Stylelint
  • yarn run dev - запуск сервера для разработки проекта
  • yarn run build - собрать проект с оптимизацией без запуска сервера
  • yarn run build:views - собрать HTML-файлы
  • yarn run build:styles - скомпилировать SCSS-файлы
  • yarn run build:scripts - собрать JS-файлы
  • yarn run build:images - собрать изображения
  • yarn run build:webp - сконвертировать изображения в формат .webp
  • yarn run build:sprites- собрать спрайты
  • yarn run build:fonts - собрать шрифты
  • yarn run build:favicons - собрать фавиконки
  • yarn run build:gzip - собрать конфигурацию Apache
  • yarn run bem-m - добавить БЭМ-блок
  • yarn run lint:styles --fix - исправить ошибки в SCSS-файлах согласно настройкам Stylelint
  • yarn run lint:scripts - проверить JS-файлы
  • yarn run lint:scripts --fix - исправить ошибки в JS-файлах согласно настройкам ESLint

💡 Рекомендации по использованию

Компонентный подход к разработке сайтов

  • каждый БЭМ-блок имеет свою папку внутри src/blocks/modules
  • папка одного БЭМ-блока содержит в себе один HTML-файл, один SCSS-файл и один JS-файл (если у блока используется скрипт)
    • HTML-файл блока импортируется в файл src/views/index.html (или в необходимый файл страницы, откуда будет вызываться блок)
    • SCSS-файл блока импортируется в файл src/blocks/modules/_modules.scss
    • JS-файл блока импортируется в src/js/import/modules.js

Пример структуры папки с БЭМ-блоком:

blocks
├── modules
│   ├──header
│   │   ├── header.html
│   │   ├── header.js
│   │   ├── header.scss

Чтобы вручную не создавать соответствующие папку и файлы, достаточно в консоли прописать следующую команду: yarn run bem-m my-block - для создания БЭМ-блока в src/block/modules, где my-block - имя БЭМ-блока (после создания нужно удалить содержимое js-файла БЭМ-блока).

Страницы проекта

  • страницы проекта находятся в папке src/views/pages
    • главная страница: src/views/index.html

Шрифты

  • шрифты находятся в папке src/fonts
    • используйте форматы .woff и .woff2
    • шрифты подключаются в файл src/styles/base/_fonts.scss
    • сконвертировать локальные шрифты можно с помощью данного сервиса

Изображения

  • изображения находятся в папке src/img
    • изображения автоматически конвертируются в формат .webp. Подробная информация по использованию тут
    • изображение для генерации фавиконок должно находиться в папке src/img/favicon и иметь размер не менее 1024px x 1024px

SVG-спрайты

Для создания спрайтов изображения .svg должны находиться в папке src/img/sprites. Например, у нас есть файлы icon-1.svg, icon-2.svg и icon-3.svg, и мы должны обратиться к icon-2.svg. Для этого в HTML нужно воспользоваться тегом <use>:

<svg>
    <use xlink:href="img/sprites/sprite.svg#logo"></use>
</svg>

Изменить стили svg-иконки из спрайта в CSS:

svg use {
    fill: red;
}

Бывает такая ситуация, когда стили иконки поменять не получается. Это связано с тем, что при экспорте из Figma в svg добавляется лишний код. Например:

<svg width="18" height="19" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z" fill="#1B1B1D"/>
</svg>

Нужно удалить fill="none" и fill="#1B1B1D". Должно получиться так:

<svg width="18" height="19" viewBox="0 0 18 19" xmlns="http://www.w3.org/2000/svg">
  <path d="M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z"/>
</svg> 

Сторонние библиотеки

  • все сторонние библиотеки устанавливаются в папку node_modules
    • для их загрузки воспользуйтеcь командой yarn add package_name (например, yarn add jquery)
    • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла БЭМ-блока (то есть тот БЭМ-блок, который использует скрипт), например:
    import $ from "jquery";
    • для подключения стилевых файлов библиотек импортируйте их в файл src/styles/vendor/_libs.scss
    • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

👉 Нужен SCSS + Pug?

Используйте эту сборку.

💛 Нравится проект?

Сообщайте мне о багах, ставьте звёздочку, задонатьте мне Telegram TON на пиво 🍺

✉️ Контакты

По всем вопросам пишите в Telegram

gulp-scss-starter's People

Contributors

alexdev27 avatar andrewalexeich avatar meecrobe avatar nlv-nki avatar rushelex avatar skrikl avatar sukhikh18 avatar twixxik avatar xiolog avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gulp-scss-starter's Issues

Пожалуйста, подправьте readme

Вместо установите NodeJS 12-ой версии

Укажите явно установите NodeJS 12.20.0 или 14.13.1

мой вывод сделан исходя из ошибки error [email protected]: The engine "node" is incompatible with this module. Expected version "^12.20.0 || ^14.13.1 || >=16.0.0". Got "14.0.0"

Это будет справедливо :)

Не подтягиваются картинки и CSS

  1. У вас в /src/views/index.html в файле прописано: <link rel="stylesheet" href="../styles/main.css">
    Если так оставить, то index.html не найдёт стили, необходимо вышеуказанную строку заменить на <link rel="stylesheet" href="styles/main.css"> и все заработает
  2. При разработке и создания билда в папку dist/img не копируются картинки включая папку svg, которая есть в src/img по умолчанию, только favicons. Как исправить?

Структура blocks

Андрей, добрый день. Ваша сборка мне очень нравится, но есть вопрос по bem в директории blocks. Для main.html есть примеры использования. Подскажите, пожалуйста, как должен выглядеть файл main.js? Хотя бы небольшой пример.

баг вылез, может подскажешь с чем связано. 2 раза переустанавливал

Internal Error: gulp-scss-starter@workspace:.: This package doesn't seem to be present in your lockfile; run "yarn install" to update the lockfile
at tF.getCandidates (C:\Users\zagz\Desktop\тестовое 2\gulp-scss-starter.yarn\releases\yarn-3.2.0.cjs:437:4480)
at wd.getCandidates (C:\Users\zagz\Desktop\тестовое 2\gulp-scss-starter.yarn\releases\yarn-3.2.0.cjs:395:1281)
at C:\Users\zagz\Desktop\тестовое 2\gulp-scss-starter.yarn\releases\yarn-3.2.0.cjs:441:7765
at Pg (C:\Users\zagz\Desktop\тестовое 2\gulp-scss-starter.yarn\releases\yarn-3.2.0.cjs:394:11098)
at le (C:\Users\zagz\Desktop\тестовое 2\gulp-scss-starter.yarn\releases\yarn-3.2.0.cjs:441:7745)
PS C:\Users\zagz\Desktop\тестовое 2\gulp-scss-starter>

Существует проблема с babel-loader

Я боролся несколько часов с тем что не мог подключить скрипты.
Точнее я их подключил, но они отказывались работать, браузер их просто не воспринимал.
Я убрал в webpack.config.js блок
use: {...}
и все заработало!

Скролл страниц

Добрый день!

Начал использовать сборку - вроде разобрался. НО не сроллятся страницы при верстке.
Верстку делаю по блокам - header, main, footer.
В index.html вставлены все блоки через rigger: //= ..........
Сверстал header(со стилями), main(html только), но при просмотре в браузере невозможно пролистать страницу вниз, чтобы увидеть остальные элементы. Только, если масштабом баловаться.
С уменьшенным масштабом - http://prntscr.com/ncjxgi
100% масштаб - http://prntscr.com/ncjysk

P.s. проверял даже если код писать полностью в index.html (в папке view) - всё равно не скроллится.

Я что-то не так делаю?
Если это баг, то как его исправить?

Предложение добавить watcher для настройки сетки smartgrid

Не очень удобно постоянно перезапускать сборку при добавлении или внесении изменений в настройки smartgrid.

Можно вынести все настройки в отдельный файл и добавить watcher для него, в результате чего файл примесей будет пересобираться по новым настройкам проекта.

Могу оформить, если идея покажется разумной.

Imagemin

Снова я:)
Заметил такую штуку:
Дома использую Win 7 - imagemin работает отлично.
На работе Win10 стоит и при попытке png-24 картинок сжать выдаёт ошибку, что качество не установлено и должно быть 0-100:
image

Почему на Win10 ругается, а на win7 нет?

На Ubuntu возникает ошибка "SyntaxError: Cannot use import statement outside a module ..."

Здравствуйте.

Пользуюсь уже на нескольких проектах Вашей сборкой. За что Вам спасибо!

С недавних пор решил осваивать Linux. И столкнулся с тем, что на Ubuntu сборка не запускается и выдаёт при запуске следующую ошибку:

    paranoic:~/PhpstormProjects/20_18$ gulp
    [14:27:25] Requiring external module @babel/register
    /home/paranoic/PhpstormProjects/project10/gulpfile.babel.js:3
    import gulp from "gulp";
    ^^^^^^
    
    SyntaxError: Cannot use import statement outside a module

Везде пишут, что это беды с babel. Но почему на одной ОС они есть, а не другой нету?

Уже предпринимал следующие меры, но они не сработали:

  • На всякий случай проверил запускается какая-то другая сборка на Ubuntu. Есть сборка без import`ов - запускается

  • Менял версию node на ту которая поддерживает модули и добавлял в package запись "type": "module"

Что нужно предпринять, чтобы сборка работала и на Ubuntu?

ошибки при установке MAC

при установке получил следующую ошибку после введения команды Yarn
error An unexpected error occurred: "EACCES: permission denied, unlink '/Users/mac/Documents/app/gulp-scss-starter/node_modules/.bin/acorn'".
info If you think this is a bug, please open a bug report with the information provided in "/Users/mac/Documents/app/gulp-scss-starter/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
на фото ошибка если писать sudo yarn
Снимок экрана 2021-08-08 в 11 24 11 AM

Добавьте ngrok

Добавьте ngrok в serve.js или любое другое решение для публикации в веб.

Также столкнулся с проблемой в scss, а именно, если допустить ошибку в стилях, то вотчер за файлами останавливается, приходится перезапускать сборку.

Решил таким способом
.pipe(sass().on('error', sass.logError))

Библиотеки CDN дописывает .min (bootstrap.min.min.css)

Добрый день!
При подключении библиотеки CDN дописывает (.min) при сборке проекта.
И получается такое вот (bootstrap.min.min.css).
В результате не находит ссылку.
С .js то же самое.

И никак не могу подключить jquery"
через import $ from "jquery";
пишет "not found"
с "wowjs" так же.

Помогите, пожалуйста.

Проблема с отслеживанием файлов

Последнее время по какой-то причине перестает работать вотчер, ошибок в консоле нет, просто при изменении файлов не отрабатывает сборщик, и проект не перебирается, может знает кто в чем может быть причина?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.