Наш телефон:

+7 (977) 797-50-30

Наш WhatsApp:

+7 (977) 797-50-30

Опубликовано: 21.11.2020
Веб-технолгии

Настройка Gulp v4 в 2020 году

Использование сборщика проектов Gulp значительно облегчает и ускоряет разработку веб-проектов.

Так же используя сборщики на выходе вы получаете минифицированные (css, js, html файлы) и адаптированные для разных браузеров файлы (css файлы).

Так же используя дополнительные модули Gulp, такие как gulp-webp вы сможете конвертировать ваши .jpg/.png изображения в современный web формат .webp, что позволит ускорить загрузку ваших страниц.

Часть 1 – Установка Gulp

Для установки вам понадобится предварительно установленный Node.js, загрузить его можно по ссылке.

Далее запускаем установку через командную строку следующую команду:


npm install --global gulp

Флаг --global устанавливает gulp для всей системы и вы можете использовать его в нескольких проектах.


Переходим к вашему проекту используя команду:


cd <путь к проекту>

Далее вводим команду:


npm init

Так мы создадим файл package.json, этот файл содержит информацию о вашем проекте, зависимости, настройки модулей.


Устанавливаем зависимости gulp:


npm install gulp --save-dev

Данная команда установит локально в проект необходимые модули.


Часть 2 – Настройка Gulp

Создаем файл gulpfile.js


В этом файле мы описываем нужные нам задачи и прописываем все модули для дальнейшей работы.


Какие модули использует веб студия Atekla для разработки своих проектов:


  • gulp-autoprefixer
  • gulp-file-include
  • gulp-sass
  • gulp-uglify
  • gulp-htmlmin
  • gulp-webp
  • gulp-clone
  • browser-sync

За что отвечают модули?


Gulp-autoprefixer – собирает CSS файл с префиксами для различных браузеров, плюс добавляет правила для поддержки старых браузеров.


Gulp-file-include – позволяет подключать ваши html файлы как если бы вы работали с PHP


Gulp-sass – позволяет собирать CSS файлы если ваш проект написан с помощью SASS/SCSS


Gulp-uglify – минификация JS файлов


Gulp-htmlmin – минификация HTML файлов


Gulp-webp – конвертация JPG/PNG изображений в WEBP с настройкой качества изображения


Gulp-clone – позволяет сохранить исходное изображение JPG/PNG и перенести его в папку проекта для использования в браузерах без поддержки WEBP


Browser-sync – верстайте ваш проект без хостинга и использования MAMP.


Подключаем модули в файл gulpfile.js


'use strict';

const gulp = require('gulp'),
    atekla_autoprefixer = require('gulp-autoprefixer'),
    atekla_file_include = require('gulp-file-include'),
    atekla_sass = require('gulp-sass'),
    atekla_uglify = require('gulp-uglify'),
    atekla_htmlmin = require('gulp-htmlmin'),
    atekla_browserSync = require('browser-sync'),
    atekla_webp = require('gulp-webp'),
    atekla_clone = require('gulp-clone'),
    atekla_clonesink = clone.sink(),
    atekla_reload = browserSync.reload;


Создаем пути для работы Gulp


const path = {
    build : {
        build_html : './<путь к скомпилированным файлам>',
        build_js : './<путь к скомпилированным файлам>/js',
        build_css : './<путь к скомпилированным файлам>/css',
        build_fonts: './<путь к скомпилированным файлам>/fonts',
        build_img : './<путь к скомпилированным файлам>/img',
        build_video : './<путь к скомпилированным файлам>/vid'
    },
    src : {
        src_html : './<путь к исходным файлам>/*.html',
        src_js : './<путь к исходным файлам>/js/*.js',
        src_css : './<путь к исходным файлам>/css/*.css',
        src_fonts : './<путь к исходным файлам>/fonts/**',
        src_video : './<путь к исходным файлам>/vid/**',
        src_img : './<путь к исходным файлам>/img/**/*.{jpg,jpeg,png,gif,ico,svg}',
    },
    watch : {
        watch_html : './<путь к исходным файлам>/**/*.html',
        watch_js : './<путь к исходным файлам>/**/*.js',
        watch_css : './<путь к исходным файлам>/**/*.css',
        watch_fonts : './<путь к исходным файлам>/fonts/**',
        watch_video : './<путь к исходным файлам>/vid/**',
        watch_img : './<путь к исходным файлам>/img/**/*.{jpg,jpeg,png,gif,ico,svg}',
    }
};

Задача Webserver – создает локальный хостинг для верстки


gulp.task("webserver", function () {
    browserSync({
        server : {
            baseDir : './'
        },
        host : 'localhost',
        port : '3000',
        tunnel : true
    });
});

Задача для работы с изображениями


gulp.task("img:build", function () {
    return gulp.src(path.src.src_img)
        .pipe(atekla_clonesink)
        .pipe(atekla_webp({
            quality: 70
        }))
        .pipe(atekla_clonesink.tap())
        .pipe(gulp.dest(path.build.build_img))
        .pipe(reload({stream:true}))
});

Задача для сборки шрифтов


gulp.task("fonts:build", function () {
    return gulp.src(path.src.src_fonts)
        .pipe(gulp.dest(path.build.build_fonts))
       .pipe(reload({stream:true}))
});

Задача для сборки видео


gulp.task("video:build", function () {
    return gulp.src(path.src.src_video)
        .pipe(gulp.dest(path.build.build_video))
        .pipe(reload({stream:true}))
});

Задача для сборки HTML


gulp.task("html:build", function () {
    return gulp.src(path.src.src_html)
        .pipe(atekla_file_include())
        .pipe(atekla_htmlmin({
            collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(gulp.dest(path.build.build_html))
        .pipe(reload({stream:true}))
});

Задача для сборки JS


gulp.task("js:build", function () {
    return gulp.src(path.src.src_js)
        .pipe(atekla_file_include())
        .pipe(atekla_uglify())
        .pipe(gulp.dest(path.build.build_js))
        .pipe(reload({stream:true}))
});

Задача для сборки CSS


gulp.task("css:build", function () {
    return gulp.src(path.src.src_css)
        .pipe(atekla_sass({outputStyle: 'compressed'}))
        .pipe(atekla_autoprefixer())
        .pipe(gulp.dest(path.build.build_css))
        .pipe(reload({stream:true}))
});

Задача для отслеживания изменений файлов


gulp.task('watch', function() {
    gulp.watch(path.watch.watch_css, gulp.series('css:build'));
    gulp.watch(path.watch.watch_js, gulp.series('js:build'));
    gulp.watch(path.watch.watch_img, gulp.series('img:build'));
    gulp.watch(path.watch.watch_fonts, gulp.series('fonts:build'));
});

Настройки нашего package.json для Gulp


"dependencies": {
    "browser-sync": "^2.26.13",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-clone": "^2.0.1",
    "gulp-file-include": "^2.2.2",
    "gulp-htmlmin": "^5.0.1",
    "gulp-sass": "^3.2.1",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2"
  },
  "browserslist": [
    "> 1%",
    "ie >= 8",
    "edge >= 15",
    "ie_mob >= 10",
    "ff >= 45",
    "chrome >= 45",
    "safari >= 6",
    "opera >= 23",
    "ios >= 6",
    "android >= 4",
    "bb >= 10"
  ],
  "devDependencies": {
    "gulp-webp": "^4.0.1"
  }

Используя Gulp вы получаете следующие преимущества:


  • Быстрая разработка
  • Поддержка старых браузеров
  • Автоматическая оптимизация и конвертация изображений
  • Минификация файлов
  • Не нужен свой хостинг
  • Легкая масштабируемость
  • Легкая поддержка проекта
Получить бесплатную консультацию
Получите бесплатный аудит вашего сайта,
что позволит выявить его слабые и сильные стороны
Пришлите нам свои данные, ссылку на сайт и краткое описание вашего бизнеса,
и мы сделаем для вас полный аудит. Вы получите аудид на свою почту.
Это совершенно бесплатно!
, , заявка на аудит сайта успешно отправлена.
В ближайшее время мы отправим результат на почту !
Спасибо, что обратились в нашу веб студию!
Получите бесплатную
консультацию!
Напишите нам, если вы считаете, что пора действовать, и мы сделаем ваш бизнес лучше
, , Ваша заявка успешно отправлена,
наши менеджеры свяжуться с Вами в ближайшее время!