Настройка 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.

Часть 3 - Создание файла gulpfile.js

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

'use strict';
let production = true;
let production_webp = false;
const gulp = require('gulp'), atekla_paths = require('path'), atekla_autoprefixer = require('gulp-autoprefixer'), atekla_rigger = require('gulp-rigger'), atekla_fileinclude = require('gulp-file-include'), atekla_sass = require('gulp-sass'), atekla_uglify = require('gulp-uglify-es').default, atekla_htmlmin = require('gulp-htmlmin'), atekla_gulpif = require ("gulp-if"), atekla_imageminWebp = require ("imagemin-webp"), atekla_imagemin = require("gulp-imagemin"), atekla_imageminPngquant = require("imagemin-pngquant"), atekla_imageminMozjpeg = require("imagemin-mozjpeg"), atekla_browserSync = require('browser-sync'), atekla_webp = require('gulp-webp'), atekla_del = require('del'), atekla_reload = atekla_browserSync.reload;

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

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

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

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

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

gulp.task("images:build", () => { return gulp.src(path.src.src_img) .pipe(atekla_gulpif(production, atekla_imagemin([ atekla_imageminPngquant({ quality: [0.5, 0.7] }), atekla_imageminMozjpeg({ progressive: true, quality: 70 }), ]))) .pipe(gulp.dest(path.build.build_img)) .pipe(atekla_webp({ quality: 70, lossless: true, alphaQuality: 70 } , atekla_gulpif(production_webp, atekla_imageminWebp({ lossless: true, quality: 70, alphaQuality: 70 })))) .pipe(gulp.dest(path.build.build_img));
});

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

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

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

gulp.task("html:build", function () { return gulp.src(path.src.src_html) .pipe(atekla_fileinclude({ prefix: '@@', basepath: '@file' })) .pipe(atekla_gulpif(production, atekla_htmlmin({ collapseWhitespace: true, removeComments: true }) )) .pipe(gulp.dest(path.build.build_html)) .pipe(atekla_reload({stream:true}));
});

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

gulp.task("js:build", function () { return gulp.src(path.src.src_js) .pipe(atekla_rigger()) .pipe(atekla_uglify()) .pipe(gulp.dest(path.build.build_js)) .pipe(atekla_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(atekla_reload({stream:true}));
});

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

let build = gulp.parallel( 'html:build', 'css:build', 'js:build', 'images:build', 'fonts:build'
);
gulp.task('build', build);

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

gulp.task('watch', function() { let watch_css = gulp.watch(path.watch.watch_css, gulp.series('css:build')); let watch_js = gulp.watch(path.watch.watch_js, gulp.series('js:build')); let watch_html = gulp.watch(path.watch.watch_html, gulp.series('html:build')); let watch_img = gulp.watch(path.watch.watch_img, gulp.series('images:build')); let watch_fonts = gulp.watch(path.watch.watch_fonts, gulp.series('fonts:build')); watch_img.on('unlink', function (filepath) { let filePathFromSrc = atekla_paths.relative(atekla_paths.resolve('src'), filepath); let destFilePath = atekla_paths.resolve('assets', filePathFromSrc); atekla_del(destFilePath); let webp_destFilePath = destFilePath.replace(/jpg|jpeg|png/gi, 'webp'); atekla_del(webp_destFilePath); }); watch_css.on('unlink', function (filepath) { let filePathFromSrc = atekla_paths.relative(atekla_paths.resolve('src'), filepath); let destFilePath = atekla_paths.resolve('assets', filePathFromSrc); atekla_del(destFilePath); }); watch_js.on('unlink', function (filepath) { let filePathFromSrc = atekla_paths.relative(atekla_paths.resolve('src'), filepath); let destFilePath = atekla_paths.resolve('assets', filePathFromSrc); atekla_del(destFilePath); }); watch_html.on('unlink', function (filepath) { let filePathFromSrc = atekla_paths.relative(atekla_paths.resolve('src'), filepath); let destFilePath = atekla_paths.resolve('', filePathFromSrc); atekla_del(destFilePath); }); watch_fonts.on('unlink', function (filepath) { let filePathFromSrc = atekla_paths.relative(atekla_paths.resolve('src'), filepath); let destFilePath = atekla_paths.resolve('', filePathFromSrc); atekla_del(destFilePath); });
});

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

{ "name": "atekla", "version": "1.0.0", "description": "Atekla.Studio", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "DS Atekla", "license": "ISC", "dependencies": { "body-scroll-lock": "^4.0.0-beta.0", "browser-sync": "^2.26.14", "del": "^5.1.0", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-clean-css": "^4.3.0", "gulp-clone": "^2.0.1", "gulp-file-include": "^2.3.0", "gulp-htmlmin": "^5.0.1", "gulp-if": "^3.0.0", "gulp-imagemin": "^7.1.0", "gulp-rigger": "^0.5.8", "gulp-sass": "^3.2.1", "gulp-sourcemaps": "^2.6.5", "gulp-uglify": "^3.0.2", "gulp-uglify-es": "^3.0.0", "gulp-watch": "^5.0.1", "gulp-webp-css": "^1.1.0", "imagemin-mozjpeg": "^8.0.0", "imagemin-webp": "^5.1.0", "node-sass": "^4.14.1" }, "browserslist": [ "> 1%", "ie >= 8", "edge >= 15", "ie_mob >= 10", "ff >= 45", "chrome >= 45", "safari >= 6", "opera >= 23", "ios >= 6", "android >= 4", "bb >= 10" ], "devDependencies": { "fontmin": "^0.9.9", "gulp-newer": "^1.4.0", "gulp-webp": "^4.0.1", "imagemin-giflossy": "^5.1.10", "imagemin-pngquant": "^9.0.1", "imagemin-zopfli": "^7.0.0", "posthtml": "^0.13.4", "posthtml-webp": "^2.1.0" }
}