Skip to content

Gulp task runner Wiki

Jump to bottom
NИ edited this page Nov 7, 2022 · 3 revisions

Особенности сборки

  • используется препроцессор SCSS
  • используется транспайлер Babel для поддержки современного JavaScript (ES6) в браузерах
  • используется Webpack для сборки JavaScript-модулей
  • используется browsersync для запуска локального сервера и отслеживания прогресса разработки в реальном времени
  • используется Gulp для автоматизации рабочего процесса и сборки проекта
  • используются миксины для создания сетки Bootstrap
  • используется RFS - Response font sizes RFS
  • используется Normalize.css
  • используется .editerconfig для поддержки согласования стиля кодирования между несколькими разработчиками editorconfig список плагинов необходимых для работы конфига в вашей IDE/редакторе кода, можно найти на Странице загрузки плагинов
  • используется конфигурация для совместного использования целевых браузеров и версий Node.js между различными интерфейсными инструментами .browserslistrc больше информации
  • используется stylelint мощный современный линтер, который поможет вам избежать ошибок и обеспечить соблюдение соглашений в ваших стилях. Страница проекта
  • используется Eslint

Установка

  • установите node.js
    • 1 способ: Обычная установка NodeJS
    • 2 способ: Рекомендую установить NVM для управления версиями node.js подробнее
  • установите глобально Gulp:
    • -> npm i -g gulp или npm i -g gulp-cli
  • скачайте сборку с помощью Git: git clone https://github.com/Ko2doo/gulp-task-runner.git
  • перейдите в скачанную папку со сборкой: cd gulp-task-runner
  • скачайте необходимые зависимости: npm i
  • чтобы начать работу, введите команду:
    • ->npm run dev или просто gulp - (режим разработки)
  • чтобы собрать проект, введите команду:
    • -> npm run build - (режим сборки)

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

Структура файлов и папок:

├── build
├── source
│   ├── fonts
│   │   └── .gitkeep
│   ├── html
│   │   ├── components
│   │   │   └── .gitkeep
│   │   ├── footer.html
│   │   ├── header.html
│   │   ├── index.html
│   │   └── sections
│   │       └── first-display.html
│   ├── img
│   │   └── .gitkeep
│   ├── js
│   │   ├── main.js
│   │   └── vendor.js
│   └── styles
│       ├── base
│       │   ├── _base.scss
│       │   ├── .directory
│       │   ├── _first-display.scss
│       │   ├── _footer.scss
│       │   └── _header.scss
│       ├── defaults
│       │   ├── _defaults.scss
│       │   ├── _functions.scss
│       │   ├── mixins
│       │   │   ├── _breakpoints.scss
│       │   │   ├── _container.scss
│       │   │   └── _grid.scss
│       │   ├── _mixins.scss
│       │   └── _variables.scss
│       ├── main.scss
│       └── vendor.scss
├── task-runners
│   ├── clean.js
│   ├── fonts.js
│   ├── html.js
│   ├── images.js
│   ├── notify.js
│   ├── scripts.js
│   ├── server.js
│   ├── styles.js
│   └── webp-converter.js
├── .browserslistrc
├── .babelrc.js
├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── gulpfile.babel.js
├── LICENSE
├── package.json
├── README.md
├── .stylelintignore
├── .stylelintrc
└── webpack.config.js
  • Корень папки ./:
    • .browserslistrc -> конфигурации для совместного использования целевых браузеров и версий Node.js между различными интерфейсными инструментами
    • .babelrc.js -> конфигурации Babel
    • .eslintrc.json -> конфигурации ESLint
    • .editorconfig -> настройки согласования стилей разработки между разработчиками
    • .gitignore -> запрет на отслеживание файлов Git'ом
    • .stylelintrc -> конфигурации Stylelint
    • .stylelintignore -> запрет на отслеживание файлов Stylelint'ом
    • gulpfile.babel.js -> конфигурация Gulp
    • webpack.config.js -> конфигурации Webpack
    • package.json -> список зависимостей
  • Папка source - используется во время разработки:
    • шрифты: -> source/fonts
    • изображения: -> source/img
    • JS-файлы: -> source/js
    • страницы сайта: -> source/views/pages
    • SCSS-файлы: -> source/styles
    • HTML-файлы: -> source/html
  • Папка build - папка, из которой запускается локальный сервер для разработки (при запуске npm run dev)
  • Папка task-runners - папка с Gulp-тасками

Команды

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

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

  • все сторонние библиотеки устанавливаются в папку node_modules
    • для их загрузки воспользуйтеcь командой npm install package_name -> пример: npm install swiper
    • для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла например:
    import Swiper from 'swiper';
    • для подключения стилевых файлов библиотек импортируйте их в файл source/styles/vendor.scss
    • JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя
Clone this wiki locally