/build_gulp4

Сборка Gulp 4, Pug, Sass

Primary LanguageJavaScript

Gulp 4. Версия с Pug + SCSS

Стартовая сборка для Фронтенда

Что включает в себя сборка?

  • gulp-autoprefixer — автоматически расставляет вендорные префиксы в CSS в соответствии с сервисом Can I Use;
  • gulp-pug — компиляция Pug в HTML;
  • gulp-concat - конкатенация файлов;
  • gulp-sass — компиляция SASS,SCSS в CSS;
  • gulp-rename — переименование файлов;
  • gulp-sourcemaps — создание карты sourcemap;
  • gulp-notify — уведомление о событиях;
  • gulp-csso — объединение дублирующихся классов;
  • gulp-watch — отслеживание изменений в файлах проекта;
  • Browsersync — автообновление браузера;
  • gulp-svg-sprite — создание svg спрайта;
  • gulp-svgmin — минификация SVG;
  • gulp-cheerio — удаление лишних атрибутов из svg;
  • gulp-replace — фиксинг возможных багов при сборке svg спрайта;

Как пользоваться?

Установить Node JS

Далее, используя cmd в Windows или Терминал Linux/macOS, проделайте следующие шаги:

  • Скачать сборку: git clone https://github.com/Berzeg07/build_gulp4.git;
  • Ставим утилиту глобально $ npm install gulpjs/gulp-cli -g;
  • Устанавливаем Gulp 4 в папку с проектом $ npm install gulp --save-dev;
  • Проверка версии gulp и чтобы убедиться, что все корректно установлено: gulp - gulp -v;

Начало работы

  • Устанавливаем пакеты из package.json: npm i;
  • Основная команда: gulp запускает слежку за файлами gulp-watch и browserSync
  • Сборка проекта: gulp-build проект собирается в папке build
  • В настройках таска browserSync можем указывать страницу с которой на данный момент работаем
module.exports = function() {
    $.gulp.task('serve', function() {
        $.bs.init({
            server: {
                baseDir: "./build",
                index: "page.html"
            }
        });
    });
}

Структура сборки

  • Работа ведется в папке: src;
  • src/pug/layout/layout.pug основной шаблон проекта
  • src/pug/includes/* директория контентой части проекта и повторяющихся блоков сайта (header, footer), подключаем в нужном месте шаблона include ../includes/header
  • src/pug/pages папка для всех страниц проекта. Главная страница index.pug с подключенным шаблоном layout.pug, контентная часть разбита на три инклюда header, content-main, footer все страницы проекта создаются по аналогии
  • src/pug/includes/mixins.pug миксины pug
  • src/pug/includes/links.pug все подключения файлов в head
  • src/pug/includes/footer.pug все подключения скриптов в блоке footer
  • src/static/libs файлы библиотек

Порядок установки нового плагина

  • gulp/gonfig/tasks.js массив с установленными плагинами галпа;
  • gulp/tasks/ все таски разбиты на отдельные файлы и подключены в gulp/gonfig/tasks.js;
  • После установки нового плагина через npm необходимо добавить его в массив gulp/config/tasks.js;
  • Создать новый файл в gulp/tasks/ с настройками плагина
  • Добавить обработку плагина в gulp/tasks/watch.js
  • Добавить обработку плагина в gulpfile.js в таски default и build