[Compiler] Компиляция SCSS файлов в бекенде



Пакет компилирует SCSS в CSS код при сохранении файла в бек-энде MODX.
Пока умеет работать только с SCSS файлами, но т.к. написан на основе Munee, то в будущем будет расширен до всех возможностей оной (кроме изображений).

Список настроек, связанных с SCSS:

  • Папка для обработки SCSS файлов
    Файлы из этой папки будут обработаны компонентом при сохранении.
  • Папка для сохранения CSS
    В эту папку будут сохранены скомпилированные CSS файлы.
  • Компилировать файлы из подпапок?
    Помимо файлов из основной директории, указанной в настройке «compiler_scss_dir_from», будут скомпилированы при сохранении и файлы, находящиеся в субдиректориях.
  • Пропускать файлы, начинающиеся с прочерка?
    Файлы, имена которых начинаются с прочерка "_" компилироваться не будут.
P.S.: Пакет писался быстро и на коленке, т.к. необходимо было решение на скорую руку, поэтому многое было взято из MinifyX Василия Наумкина, за что ему безмерное спасибо!

Скачать пакет в modStore.pro
19 августа 2016, 10:15    Павел Гвоздь   
6    1040 +14

Комментарии (38)

  1. Здоров Александр 19 августа 2016, 13:14 # +1
    ждемс испытать
    1. Павел Гвоздь 19 августа 2016, 13:21 # +6
      Добавил в modStore. Ждём модерации.
        1. Павел Гвоздь 19 августа 2016, 18:45 # +3
          Спасибо, Леонид!
          1. Максим 22 августа 2016, 08:16 # 0
            А как долго ждать в «установщике приложений»?
            Там только LessCss выдает, когда вводишь Compiler.
            1. Павел Гвоздь 22 августа 2016, 09:51 # 0
              Речь про modstore? Компонент есть только там.
              1. Максим 22 августа 2016, 09:57 # 0
                я имею ввиду из админки сайта его как загрузить?
                1. Павел Гвоздь 22 августа 2016, 09:59 # +1
                  Также, как и любой другой пакет из репозитория modStore.
                  1. Максим 22 августа 2016, 10:07 # +1
                    спасибо, просто поставщика не выбрал)) поэтому в поиске не выводил результаты )) первый раз загружаю дополнения ))
    2. Николай Загумённов 19 августа 2016, 18:25 # +2
      Круто! Давно хотелось, чтобы что-то подобное было под MODX.
      1. Андрей Копп 20 августа 2016, 01:47 # 0
        Павел, было бы большим плюсом, если бы вы на примерах показали работу компонента.
        1. Здоров Александр 20 августа 2016, 06:58 # +2
          из моего опыта — нужно открыть и сохранить любой scss файл из папки, которую вы указали в настройках, после этого соберется файл css в папке. которую вы указали для css файла. и уже этот файл вы обыкновенным образом вызываете на странице
          1. Павел Гвоздь 20 августа 2016, 10:18 # +3
            Ну да, всё верно. Нет никаких сниппетов, чанков. Есть только плагин, который отлавливает события сохранения/обновления файла из бек-энда.
        2. Дмитрий Середюк 20 августа 2016, 02:05 # 0
          Круто!, недавно воротил gulp + sass в беке мода, но нифига не вышло, а тут гляди подкатило, низкий поклон! Будем пробовать)
          1. Максим 23 августа 2016, 07:44 # 0
            Есть файл test.scss, в него импортируется _test2.scss. Когда редактирую и сохраняю _test2.scss, чтобы данные обновились, нужно зайти в test.scss и сохранить еще и его. Это не очень удобно… можно что-то сделать с этим?
            1. Здоров Александр 23 августа 2016, 08:16 # 0
              Пропускать файлы, начинающиеся с прочерка?
              Файлы, имена которых начинаются с прочерка "_" компилироваться не будут. это в описании есть
              1. Максим 23 августа 2016, 09:07 # 0
                Нет, нето…
                Когда сохраняю файл "_*.scss", нужно чтобы перекомпилировались другие файлы, в которых этот файл импортируется (@import "_*.scss")
              2. Павел Гвоздь 23 августа 2016, 08:24 # 0
                Можно. Я уже думаю над решением. В обновлении поправлю это.
                1. Максим 23 августа 2016, 09:04 # 0
                  Спасибо!
                  1. Klike 25 августа 2016, 14:53 # 0
                    Ещё может как-то можно сделать, когда правишь scss вне админки, чтобы компилировался, например MinifyX проверяет файл на изменение)
                    1. Павел Гвоздь 25 августа 2016, 15:18 # 0
                      MinifyX компилирует, а не проверяет… компилирует при загрузке страницы, когда сниппет вызывается… если сниппет закешен, то MinifyX тебе ничего не скомпилирует.
                      А тут как это сделать? Нет, вряд ли такое получится. Данный инструмент не претендует на замену MinifyX или замену IDE редактора. Это всего лишь пакет, который позволяет скомпилировать, пока только, SCSS при сохранении файла из бек-энда. Если надо компилировать вне админки — настрой проект в каком-нибудь Саблайме или Шторме и компилируй.
                    2. Максим 29 августа 2016, 09:19 # 0
                      А если при сохранении любого файла из заданной папки scss компилировать все файлы в этой папке, это сильно ресурсозатратная операция будет?
                      Смотрел проекты Slic, Fontawesome, Bootstrap… там как правило только один файл без "_", в котором подключаются остальные.
                      1. Павел Гвоздь 29 августа 2016, 09:35 # 0
                        Сильно. И по времени тоже. Есть вариант: при сохранении основного файла записывать все импортируемые в него файлы в таблицу, а далее, если сохраним один из этих файлов — ищем его в этой таблице и пересохраняем основной файл. Сейчас пока времени на реализацию нету.
                  2. Максим 27 августа 2016, 08:13 # 0
                    столкнулся с такой проблемой:
                    вот такой код
                    %test-background{
                    	background: rgba(0,0,0,0.1);
                    }
                    .div{
                      @extend %test-background;
                      &__div{
                        @extend %test-background;
                      }
                    }
                    
                    компилируется в
                    .div, __div.div {
                        background: rgba(0, 0, 0, 0.1);
                    }
                    
                    Хотя тот же код в CodePen компилируется нормально
                    codepen.io/anon/pen/JKgRNd
                    .div, .div__div {
                        background: rgba(0, 0, 0, 0.1);
                    }
                    Проблема возникает только при использовании @extend в &__div
                    1. Павел Гвоздь 27 августа 2016, 12:59 # 0
                      Обновляйся до 1.0.4.

                      — Обновлено:
                      Это ещё не сделал. Пока думаю над реализацией.
                      1. Максим 27 августа 2016, 15:02 # 0
                        Спасибо за оперативность! :)
                        Заработало как надо! :)
                    2. Максим 18 октября 2016, 19:50 # 0
                      [2016-10-18 19:38:26] (ERROR @ /srv/site.ru/core/components/compiler/model/compiler/compiler.class.php: 89) [Compiler] Error in SCSS Compiler: Undefined variable $i: line: 48

                      Этот код из bootstrap 4
                      Koala компилирует нормально, без ошибок

                      	@for $i from 1 through $columns {
                      		.col-#{$breakpoint}-#{$i} {
                      			@include make-col($i, $columns); //line 48
                      		}
                      	}
                      
                      1. Павел Гвоздь 19 октября 2016, 14:07 # 0
                        Можно ссылку на Bootstrap 4 SCSS? Что-то я найти его не могу.
                        1. Максим 19 октября 2016, 17:33 # 0
                          1. Павел Гвоздь 07 декабря 2016, 02:40 # 0
                            Понимаю, что бесчеловечно затянул. Тем не менее сообщу, что данный баг поправлен в версии 1.0.5.
                      2. Павел 04 ноября 2016, 18:36 # 0
                        Подскажите пожалуйста… Если возможность обновить css файл, который берёт данные у файла scss файла в ручную? К примеру через Consol.

                        Сейчас это работает вручную, хочется также научиться обновлять файлы в своих скриптах
                        1. Павел Гвоздь 04 ноября 2016, 18:52 # 0
                          Не ясен вопрос, опишите конкретнее.
                          1. Павел 06 ноября 2016, 15:49 # 0
                            как обновить css файл, когда я уже сделал изменения в файле scss, не через плагин (в данном случае при сохранение файла scss), а через php-скрипт
                            1. Павел 09 ноября 2016, 12:35 # 0
                              Вообщем я разобрался, как работать с классом. Всё хорошо отрабатывается, только предупреждение есть:
                              [2016-11-09 12:33:41] (WARN @ /www/core/xpdo/xpdo.class.php : 542)
                              Could not load package metadata for package compiler.
                              
                              1. Павел Гвоздь 07 декабря 2016, 02:39 # +1
                                Поправил в версии 1.0.5.
                        2. Алекс 19 декабря 2016, 21:27 # 0
                          Крутотень.Большое спасибо.
                          1. Николай Савин 30 декабря 2016, 23:42 # 0
                            Как новичок в использовании SCSS, никак в толк не возьму, зачем отдельно компилировать мой SCSS в CSS, я подключаю файл в minifyx и все прекрасно работает. Ну конечно я понимаю вопрос с кэшированием. Кроме этого разница есть между Compiler и Minifyx?
                            1. Павел Гвоздь 05 января 2017, 14:51 # +1
                              Разница в том, что Compiler собирает CSS в момент сохранения файла, а MinifyX в момент обращения к странице. То есть, если надо скомпилить большой SCSS, то это будет происходить на стороне юзера, пусть и единожды (до сброса кеша), но это не очень приятно будет для него.

                              P.S.: А вообще, лучше отдавать генерацию SCSS какому-нибудь Gulp или PostCSS, если такая возможность есть. Compiler был написан, как раз для того, чтобы генерировать CSS из SCSS по-быстрому на рабочем проекте, на котором нет возможности поднять NodeJS.
                            Вы должны авторизоваться, чтобы оставлять комментарии.