Gulp css,scss как настроить?

Для настройки компиляции CSS и SCSS с использованием Gulp.js вам потребуется сделать несколько шагов. Вот подробная инструкция:

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

Затем создайте новую папку проекта и перейдите в нее через командную строку (терминал). В этой папке выполните команду npm init, чтобы создать файл package.json, который будет содержать информацию о вашем проекте.

Далее установите Gulp.js глобально, выполните команду npm install gulp-cli -g.

Теперь установите Gulp.js локально. Выполните команду npm install gulp -D. Эта команда установит Gulp.js и добавит его в раздел devDependencies в файле package.json.

Для компиляции CSS и SCSS вам понадобятся следующие плагины Gulp.js:
- gulp-sass: для компиляции SCSS в CSS
- gulp-autoprefixer: для добавления вендорных префиксов в CSS
- gulp-clean-css: для минификации CSS

Установите их, выполнив команду npm install gulp-sass gulp-autoprefixer gulp-clean-css -D. После этого они будут добавлены в раздел devDependencies файла package.json.

Шаг 2: Создайте Gulpfile.js
Создайте новый файл с именем Gulpfile.js в корневой папке вашего проекта. Этот файл будет содержать настройки Gulp.js для компиляции CSS и SCSS.

В Gulpfile.js добавьте следующий код:

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

// Компиляция SCSS в CSS
gulp.task('compile-scss', () => {
  return gulp.src('src/scss/**/*.scss') // путь к вашим SCSS файлам
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest('dist/css')); // путь, куда будет скомпилирован CSS
});

// Минификация CSS
gulp.task('minify-css', () => {
  return gulp.src('dist/css/**/*.css') // путь к скомпилированному CSS
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css')); // путь, куда будет сохранен минифицированный CSS
});

// Запуск задач по умолчанию
gulp.task('default', gulp.series('compile-scss', 'minify-css'));

Шаг 3: Запустите компиляцию
Теперь, когда все настроено, вы можете запустить компиляцию CSS и SCSS с помощью команды gulp в вашей командной строке (терминале). Gulp.js выполнит задачу по умолчанию, которая включает компиляцию SCSS в CSS, добавление вендорных префиксов и минификацию CSS.

Вы увидите, что созданы новые файлы CSS в папке dist/css.

В дальнейшем, когда вы будете вносить изменения в SCSS файлы, Gulp.js автоматически будет обнаруживать изменения и выполнять перекомпиляцию CSS. Вы можете оставить команду gulp запущенной в фоновом режиме и она будет следить за изменениями файлов.

Таким образом, вы можете настроить компиляцию CSS и SCSS с использованием Gulp.js. Эта конфигурация обеспечит автоматическое обновление CSS при изменении SCSS файлов, а также минификацию CSS для оптимизации размера файлов.