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



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

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

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

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

Comments (38)

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

                      — Обновлено:
                      Это ещё не сделал. Пока думаю над реализацией.
                      1. Максим 27 august 2016, 15:02 # 0
                        Спасибо за оперативность! :)
                        Заработало как надо! :)
                    2. Максим 18 october 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 october 2016, 14:07 # 0
                        Можно ссылку на Bootstrap 4 SCSS? Что-то я найти его не могу.
                        1. Максим 19 october 2016, 17:33 # 0
                          1. Павел Гвоздь 07 december 2016, 02:40 # 0
                            Понимаю, что бесчеловечно затянул. Тем не менее сообщу, что данный баг поправлен в версии 1.0.5.
                      2. Павел 04 november 2016, 18:36 # 0
                        Подскажите пожалуйста… Если возможность обновить css файл, который берёт данные у файла scss файла в ручную? К примеру через Consol.

                        Сейчас это работает вручную, хочется также научиться обновлять файлы в своих скриптах
                        1. Павел Гвоздь 04 november 2016, 18:52 # 0
                          Не ясен вопрос, опишите конкретнее.
                          1. Павел 06 november 2016, 15:49 # 0
                            как обновить css файл, когда я уже сделал изменения в файле scss, не через плагин (в данном случае при сохранение файла scss), а через php-скрипт
                            1. Павел 09 november 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 december 2016, 02:39 # +1
                                Поправил в версии 1.0.5.
                        2. Алекс 19 december 2016, 21:27 # 0
                          Крутотень.Большое спасибо.
                          1. Николай Савин 30 december 2016, 23:42 # 0
                            Как новичок в использовании SCSS, никак в толк не возьму, зачем отдельно компилировать мой SCSS в CSS, я подключаю файл в minifyx и все прекрасно работает. Ну конечно я понимаю вопрос с кэшированием. Кроме этого разница есть между Compiler и Minifyx?
                            1. Павел Гвоздь 05 january 2017, 14:51 # +1
                              Разница в том, что Compiler собирает CSS в момент сохранения файла, а MinifyX в момент обращения к странице. То есть, если надо скомпилить большой SCSS, то это будет происходить на стороне юзера, пусть и единожды (до сброса кеша), но это не очень приятно будет для него.

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