Для автоматической загрузки CSS файлов на хостинг после компиляции SCSS файлов с помощью Gulp.js в PHPStorm, вам потребуется создать и настроить соответствующую задачу в Gulp и настроить исполнение этой задачи через PHPStorm.
Вот пошаговая инструкция, которая поможет вам достичь описанного выше результата:
Шаг 1: Установка необходимых пакетов
Установите пакеты, необходимые для Gulp, командой npm install --save-dev gulp gulp-sass gulp-rename del. Пакеты gulp-sass и gulp-rename понадобятся для компиляции SCSS файлов и переименования результатов компиляции. Пакет del будет использоваться для удаления предыдущих CSS файлов перед каждым запуском компиляции.
Шаг 2: Настройка Gulp
Создайте файл gulpfile.js в корневой директории вашего проекта. В этом файле вы можете определить и настроить задачи для Gulp.
Начните с импорта необходимых пакетов в ваш файл gulpfile.js:
const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const del = require('del');
Затем определите задачу для компиляции SCSS файлов:
gulp.task('compile-scss', function() {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('dist/css'));
});
Наконец, определите задачу для удаления предыдущих CSS файлов:
gulp.task('clean-css', function() {
return del('dist/css/**/*.css');
});
Вы можете изменить пути к вашим SCSS и CSS файлам для вашего конкретного проекта.
Шаг 3: Настройка PHPStorm
Откройте PHPStorm и перейдите в настройки Gulp.js (File -> Settings -> Tools -> External Tools -> Gulp.js).
Нажмите на плюс (+), чтобы добавить новую настройку Gulp.
В поле "Name" введите имя для вашей настройки, например, "Compile SCSS".
В поле "Program" укажите путь до исполняемого файла Gulp в вашей системе. Например, путь может быть следующим: "C:Program Filesnodejsnode_modulesgulpbingulp.js" (если вы используете Windows).
В поле "Arguments", укажите название задачи из вашего файла gulpfile.js, которую вы хотите выполнить, например, "compile-scss".
В поле "Working directory" укажите путь до корневой директории вашего проекта.
Нажмите "OK", чтобы сохранить настройки.
Шаг 4: Запуск задачи
После завершения настройки вам будет доступна новая команда Gulp в PHPStorm. Чтобы запустить задачу, выберите "Gulp" из главного меню PHPStorm (Tools -> Gulp -> Ваша настройка Gulp -> Имя задачи, например, "Compile SCSS").
Теперь после каждого запуска этой команды, ваши SCSS файлы будут компилироваться в CSS и загружаться на ваш хостинг.
Таким образом, вы можете использовать Gulp.js и PHPStorm вместе, чтобы упростить процесс разработки и загрузки CSS файлов на ваш хостинг. Эта конфигурация позволяет вам автоматизировать компиляцию SCSS файлов и сразу же загружать полученные CSS файлы на ваш хостинг.