starkovsergey / simple-gulp-setup Goto Github PK

1. git clone
2. npm install

1. начать работу

• npm start -- запускает live-server и компиляторы

2. собрать проект

• npm run build

• docs/ -- собранный проект
• gulp/ -- хранит задачи для gulp
• src/ -- исходные файлы
  • files/ -- разные файлы (video, audio)
  • fonts/
  • html/ -- шаблоны для html
  • img/
  • js/
  • scss/
    • blocks/ -- файлы scss для БЭМ-блоков
    • configs/
      • fonts.scss -- подключение шрифтов
      • variables.scss -- подключение CSS и SCSS-переменных
    • global.scss -- глобальные стили
    • style.scss -- точка входа для стилей
  • index.html

1. Перенос файлов из папки с исходниками в папку docs
2. Компиляция SCSS в CSS, создание карт кода для стилей
3. Оптимизация изображений
4. Запуск сервера
5. Минификация js
6. Создание js-бандла при помощи webpack-плагина
7. Работа с шаблонами при помощи плагина fileinclude, например можно подключать html-шаблоны: @@include('html/footer.html', {})

В сборке присутствуют мои конфиги линтеров для js и стилей. Чтобы работать с ними в VSCode необходимое установить следующие плагины:

1. ESLint
2. Stylelint -- добавлена сортировка стилей и работа с SCSS
3. Prettier - Code formatter Теперь ошибки будут подчёркиваться, а при форматировании будет работать автоисправление ошибок.