Как собрать БЭМ-проект с помощью Gulp?

Для сборки БЭМ-проекта с использованием Gulp.js существует несколько шагов. Давайте разберем каждый из них подробнее.

Шаг 1: Установка зависимостей
Перед началом работы убедитесь, что у вас установлен Node.js и npm (пакетный менеджер Node.js). Это позволит установить Gulp.js и другие необходимые модули.

После установки Node.js и npm откройте терминал и выполните следующую команду для установки Gulp.js глобально:

npm install -g gulp

После установки Gulp.js вам необходимо создать файл package.json для вашего проекта. Выполните следующую команду, чтобы создать файл package.json и указать необходимые зависимости:

npm init -y

Эта команда создаст файл package.json с настройками по умолчанию.

Шаг 2: Установка Gulp и плагинов
После создания package.json вам необходимо установить сам Gulp.js и необходимые плагины для сборки БЭМ-проекта. Например, установим плагины для компиляции Sass, сжатия CSS и JavaScript, а также для оптимизации изображений:

npm install gulp gulp-sass gulp-clean-css gulp-uglify gulp-imagemin --save-dev

Эта команда установит Gulp.js и плагины, которые вы указали в списке.

Шаг 3: Создание Gulpfile.js
Далее вам необходимо создать файл Gulpfile.js, в котором будет описана сборка вашего БЭМ-проекта. Откройте файл Gulpfile.js в вашем редакторе кода и добавьте следующий код:

const gulp = require('gulp');
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const imagemin = require('gulp-imagemin');

gulp.task('sass', function () {
  return gulp.src('src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('minify-css', function () {
  return gulp.src('dist/css/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('uglify', function () {
  return gulp.src('src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

gulp.task('imagemin', function () {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

gulp.task('default', gulp.series('sass', 'minify-css', 'uglify', 'imagemin'));

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

Шаг 4: Запуск сборки
Теперь, когда у вас есть Gulpfile.js и установлены все необходимые плагины, вы можете запустить сборку вашего БЭМ-проекта. Для этого введите следующую команду в терминале:

gulp

Эта команда выполнит все задачи, указанные в файле Gulpfile.js, и соберет ваш БЭМ-проект в папку dist.

Теперь вы знаете основные шаги для сборки БЭМ-проекта с помощью Gulp.js. Вы можете настроить свою сборку, добавив дополнительные задачи и плагины по своему усмотрению.