Автоматическая загрузка сгенерированных CSS-файлов на сервер при разработке в VSCode

Введение

При разработке веб-проектов, особенно тем для WordPress, часто возникает необходимость оперативно видеть изменения стилей на удалённом сервере. Однако, если используется Live Sass Compiler для автоматической компиляции SCSS в CSS, возникает проблема: файлы .scss изменяются вручную, но .css создаются автоматически.

Плагин SFTP в VSCode отслеживает изменения только в редактируемых файлах, а значит, скомпилированные CSS-файлы остаются локальными и не загружаются на сервер. Это создаёт неудобство: приходится загружать их вручную после каждой компиляции.

Рассмотрим, как решить эту проблему, чтобы CSS-файлы загружались автоматически сразу после компиляции.

Решение

1. Установка необходимых инструментов

Убедитесь, что у вас установлены:

• VSCode (основная среда разработки);
• Live Sass Compiler (автоматическая компиляция SCSS → CSS);
• SFTP (автоматическая загрузка файлов на сервер через SFTP/SCP);
• Доступ к удалённому серверу (Linux-сервер с установленным SFTP-доступом).

2. Проблема автоматической загрузки сгенерированных файлов

Когда Live Sass Compiler генерирует CSS-файл, VSCode не считает его изменённым вручную, поэтому плагин SFTP его не загружает. Из-за этого приходится либо загружать файлы вручную, либо писать отдельные скрипты для их синхронизации.

3. Настройка SFTP для автоматической загрузки сгенерированных файлов

Чтобы SFTP автоматически загружал любой изменённый файл, включая автоматически сгенерированные, необходимо добавить в настройки sftp.json раздел watcher и настроить пути. Откройте sftp.json в .vscode и пропишите:

{
    "name": "ProjectName",
    "host": "your-server.com",
    "protocol": "sftp",
    "port": 22,
    "username": "your-user",
    "password": "your-password",
    "remotePath": "/var/www/project",
    "uploadOnSave": true,
    "autoUpload": true,
    "autoDelete": false,
    "useTempFile": false,
    "openSsh": false,
    "watcher": {
        "files": "**/*.css",
        "autoUpload": true,
        "autoDelete": false
    },
    "ignore": [
        "**/.vscode/**",
        "**/.git/**",
        "**/node_modules/**",
        "**/*.map"
    ],
    "watcherDelay": 500
}

4. Разбор параметров конфигурации

• "uploadOnSave" – загружает файл при его сохранении;
• "autoUpload": true, – автоматически загружает файлы, когда они изменяются;
• "files": "**/*.css" – отслеживает изменения во всех CSS-файлах в проекте;
• "autoUpload": true – автоматически загружает изменённые файлы;
• "ignore" – исключает ненужные файлы, например, .map, node_modules, .git;
• "watcherDelay" – добавляет небольшую задержку перед загрузкой (важно, если компиляция занимает время).

5. Проверка работы

1. Измените любой SCSS-файл в проекте.
2. Live Sass Compiler автоматически скомпилирует его в CSS.
3. SFTP сразу загрузит обновлённый CSS на сервер.
4. Обновите страницу – изменения должны примениться моментально.

Вывод

Теперь автоматически сгенерированные CSS-файлы сразу загружаются на сервер, избавляя от необходимости загружать их вручную. Это упрощает процесс разработки и делает работу с Live Sass Compiler и удалённым сервером удобнее.

Вместо использования сторонних скриптов и сложных решений достаточно правильно настроить sftp.json, добавив watcher, и всё работает автоматически. 🎯