Простая сборка Gulp для верстки сайта.

Пример простой настройки Gulp для макета сайта с комментариями. В этом примере мы определили три задачи: стили, скрипты и изображения.

Задача стилей компилирует Sass в CSS, добавляет префиксы поставщиков, минимизирует CSS и объединяет выходные данные в один файл.
Задача сценариев минимизирует и объединяет файлы JavaScript.
Задача изображений оптимизирует изображения.

Мы также определили задачу наблюдения для отслеживания изменений в исходных файлах и запуска соответствующей задачи при возникновении изменений. Наконец, мы определили задачу по умолчанию для запуска всех трех задач и наблюдения за изменениями файлов при вводе gulp в терминале.

// Подключение Gulp и плагинов
const gulp = require("gulp");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const cssnano = require("gulp-cssnano");
const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
const imagemin = require("gulp-imagemin");

// Определяем задачи
// Компилируем Sass в CSS, добавляем префиксы, минимизируем и объединяем CSS файлы
gulp.task("styles", () => {
  return gulp
    .src("src/scss/**/*.scss") // Исходные файлы
    .pipe(sass()) // Компилируем Sass в CSS
    .pipe(autoprefixer()) // Добавляем префиксы
    .pipe(cssnano()) // Минимизируем CSS
    .pipe(concat("styles.min.css")) // Объединяем в один файл
    .pipe(gulp.dest("dist/css")); // Папка назначения
});

// Минимизируем и объединяем JavaScript файлы
gulp.task("scripts", () => {
  return gulp
    .src("src/js/**/*.js") // Исходные файлы
    .pipe(uglify()) // Минимизируем JavaScript
    .pipe(concat("scripts.min.js")) // Объединяем в один файл
    .pipe(gulp.dest("dist/js")); // Папка назначения
});

// Оптимизируем изображения
gulp.task("images", () => {
  return gulp
    .src("src/images/**/*") // Исходные файлы
    .pipe(imagemin()) // Оптимизируем изображения
    .pipe(gulp.dest("dist/images")); // Папка назначения
});

// Следим за изменениями в исходных файлах и запускаем соответствующие задачи
gulp.task("watch", () => {
  gulp.watch("src/scss/**/*.scss", gulp.series("styles")); // Отслеживаем Sass файлы
  gulp.watch("src/js/**/*.js", gulp.series("scripts")); // Отслеживаем JavaScript файлы
  gulp.watch("src/images/**/*", gulp.series("images")); // Отслеживаем файлы изображений
});

// Задача по умолчанию для запуска при вводе «gulp» в терминале
gulp.task("default", gulp.series("styles", "scripts", "images", "watch"));