Для добавления препроцессора SCSS в Gulp.js вам понадобится использовать два плагина - gulp-sass и gulp-concat.
1. Установка плагинов:
Вам нужно установить gulp-sass и gulp-concat пакеты в ваш проект. Вы можете сделать это, выполнив следующую команду в командной строке внутри директории вашего проекта:
npm install --save-dev gulp-sass gulp-concat
2. Подключение плагинов:
В файле gulpfile.js добавьте следующие строки перед определением задач:
const sass = require('gulp-sass');
const concat = require('gulp-concat');
3. Создание задачи для компиляции SCSS:
Добавьте следующий код в файл gulpfile.js:
gulp.task('sass', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass())
.pipe(concat('styles.css'))
.pipe(gulp.dest('dist/css'));
});
Эта задача берет все файлы с расширением .scss в папке src/scss и ее подпапках, компилирует их в CSS с использованием gulp-sass плагина, затем объединяет все скомпилированные файлы в один и сохраняет его в папке dist/css.
4. Настройка задачи по умолчанию:
Обычно в Gulp.js указывается задача по умолчанию, которая будет выполняться при запуске команды gulp без аргументов.
Добавьте следующий код в файл gulpfile.js после определения задачи sass:
gulp.task('default', gulp.series('sass'));
Этот код указывает Gulp.js запускать задачу sass при выполнении команды gulp без аргументов.
5. Запуск задачи:
Теперь вы можете запустить задачу, выполнив следующую команду в командной строке:
gulp
Это выполнит задачу по умолчанию, которая в свою очередь выполнит задачу sass, компилируя ваши SCSS-файлы.
Вот и все! Теперь вы успешно добавили препроцессор SCSS в Gulp.js. Все ваши файлы SCSS будут автоматически компилироваться в CSS и сконкатенированы в один файл, который будет сохранен в папке dist/css. Вы можете настроить эту конфигурацию по своему усмотрению, включая пути к входным и выходным файлам, а также названия и расположения получаемых CSS-файлов.