Как подружить sass alias в gulp с webstorm?

Чтобы настроить поддержку SASS-Alias в Gulp.js в WebStorm, вам понадобится выполнить следующие шаги:

Шаг 1: Установка плагина "gulp-sass-aliases"
Вам необходимо установить плагин "gulp-sass-aliases", чтобы иметь возможность использовать SASS-Alias в вашем проекте. Для этого выполните следующую команду:

npm install gulp-sass-aliases --save-dev

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

Шаг 3: Подключение модулей
Подключите необходимые модули в вашем файле "gulpfile.js". Добавьте следующий код в верхнюю часть файла:

const gulp = require('gulp');
const sass = require('gulp-sass');
const sassAlias = require('gulp-sass-aliases');

Шаг 4: Настройка задачи компиляции SASS с использованием alias
Добавьте следующий код в ваш файл "gulpfile.js", чтобы настроить задачу компиляции Sass с использованием alias:

gulp.task('sass', function () {
  return gulp.src('path/to/sass/files')
    .pipe(sassAlias({
      '^@styles': 'path/to/styles/folder',
      '^@assets': 'path/to/assets/folder'
      // Другие ваши alias-ы
    }))
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('path/to/output/css/folder'));
});

В этом коде мы используем метод gulp.src('path/to/sass/files') для выбора файлов SASS, которые необходимо компилировать. Метод sassAlias() позволяет указать псевдонимы, которые вы хотите использовать для ссылки на различные папки в вашем проекте. Например, псевдоним '^@styles' будет заменяться на путь 'path/to/styles/folder'.

Шаг 5: Запуск задачи компиляции SASS
Добавьте следующий код в ваш файл "gulpfile.js", чтобы запустить задачу компиляции SASS:

gulp.task('watch', function () {
  gulp.watch('path/to/sass/files', gulp.series('sass'));
});

В этом коде мы используем метод gulp.watch('path/to/sass/files', gulp.series('sass')) для отслеживания изменений в файлах SASS и автоматической компиляции при их обнаружении.

Шаг 6: Запуск Gulp.js
Откройте терминал в корневой директории вашего проекта и выполните следующую команду, чтобы запустить Gulp.js:

gulp watch

Теперь ваш проект будет отслеживать изменения в файлах SASS и автоматически компилировать их с использованием заданных псевдонимов.

Надеюсь, что эти шаги будут полезны и помогут вам настроить поддержку SASS-Alias в Gulp.js с помощью WebStorm.