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

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

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

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

P.S.: Пакет писался быстро и на коленке, т.к. необходимо было решение на скорую руку, поэтому многое было взято из MinifyX Василия Наумкина, за что ему безмерное спасибо!

Скачать пакет в modStore.pro

Павел Гвоздь

19 августа 2016, 07:15

7 951

+14

Поблагодарить автора Отправить деньги

Комментарии: 58

Здоров Александр

19 августа 2016, 13:14

ждемс испытать

Павел Гвоздь

19 августа 2016, 13:21

Добавил в modStore. Ждём модерации.

Leonid Krylov

19 августа 2016, 18:44

modstore.pro/packages/utilities/compiler

Павел Гвоздь

19 августа 2016, 18:45

Спасибо, Леонид!

Максим

22 августа 2016, 08:16

А как долго ждать в «установщике приложений»?
Там только LessCss выдает, когда вводишь Compiler.

Павел Гвоздь

22 августа 2016, 09:51

Речь про modstore? Компонент есть только там.

Максим

22 августа 2016, 09:57

я имею ввиду из админки сайта его как загрузить?

Павел Гвоздь

22 августа 2016, 09:59

Также, как и любой другой пакет из репозитория modStore.

Максим

22 августа 2016, 10:07

спасибо, просто поставщика не выбрал)) поэтому в поиске не выводил результаты )) первый раз загружаю дополнения ))

Николай Загумённов

19 августа 2016, 18:25

Круто! Давно хотелось, чтобы что-то подобное было под MODX.

Андрей Копп

20 августа 2016, 01:47

Павел, было бы большим плюсом, если бы вы на примерах показали работу компонента.

Здоров Александр

20 августа 2016, 06:58

из моего опыта — нужно открыть и сохранить любой scss файл из папки, которую вы указали в настройках, после этого соберется файл css в папке. которую вы указали для css файла. и уже этот файл вы обыкновенным образом вызываете на странице

Павел Гвоздь

20 августа 2016, 10:18

Ну да, всё верно. Нет никаких сниппетов, чанков. Есть только плагин, который отлавливает события сохранения/обновления файла из бек-энда.

Дмитрий Середюк

20 августа 2016, 02:05

Круто!, недавно воротил gulp + sass в беке мода, но нифига не вышло, а тут гляди подкатило, низкий поклон! Будем пробовать)

Максим

23 августа 2016, 07:44

Есть файл test.scss, в него импортируется _test2.scss. Когда редактирую и сохраняю _test2.scss, чтобы данные обновились, нужно зайти в test.scss и сохранить еще и его. Это не очень удобно… можно что-то сделать с этим?

Здоров Александр

23 августа 2016, 08:16

Пропускать файлы, начинающиеся с прочерка?
Файлы, имена которых начинаются с прочерка "_" компилироваться не будут. это в описании есть

Максим

23 августа 2016, 09:07

Нет, нето…
Когда сохраняю файл "_*.scss", нужно чтобы перекомпилировались другие файлы, в которых этот файл импортируется (@import "_*.scss")

Павел Гвоздь

23 августа 2016, 08:24

Можно. Я уже думаю над решением. В обновлении поправлю это.

Максим

23 августа 2016, 09:04

Спасибо!

Klike

25 августа 2016, 14:53

Ещё может как-то можно сделать, когда правишь scss вне админки, чтобы компилировался, например MinifyX проверяет файл на изменение)

Павел Гвоздь

25 августа 2016, 15:18

MinifyX компилирует, а не проверяет… компилирует при загрузке страницы, когда сниппет вызывается… если сниппет закешен, то MinifyX тебе ничего не скомпилирует.
А тут как это сделать? Нет, вряд ли такое получится. Данный инструмент не претендует на замену MinifyX или замену IDE редактора. Это всего лишь пакет, который позволяет скомпилировать, пока только, SCSS при сохранении файла из бек-энда. Если надо компилировать вне админки — настрой проект в каком-нибудь Саблайме или Шторме и компилируй.

Максим

29 августа 2016, 09:19

А если при сохранении любого файла из заданной папки scss компилировать все файлы в этой папке, это сильно ресурсозатратная операция будет?
Смотрел проекты Slic, Fontawesome, Bootstrap… там как правило только один файл без "_", в котором подключаются остальные.

Павел Гвоздь

29 августа 2016, 09:35

Сильно. И по времени тоже. Есть вариант: при сохранении основного файла записывать все импортируемые в него файлы в таблицу, а далее, если сохраним один из этих файлов — ищем его в этой таблице и пересохраняем основной файл. Сейчас пока времени на реализацию нету.

Максим

28 июля 2017, 09:22

Как дела в данном направлении? ) Дошло до реализации идеи? )

Павел Гвоздь

28 июля 2017, 13:29

К сожалению, некогда этим заниматься.

Максим

27 августа 2016, 08:13

столкнулся с такой проблемой:
вот такой код

%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

Павел Гвоздь

27 августа 2016, 12:59

Обновляйся до 1.0.4.

— Обновлено:
Это ещё не сделал. Пока думаю над реализацией.

Максим

27 августа 2016, 15:02

Спасибо за оперативность! :)
Заработало как надо! :)

Максим

18 октября 2016, 19:50

[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
		}
	}

Павел Гвоздь

19 октября 2016, 14:07

Можно ссылку на Bootstrap 4 SCSS? Что-то я найти его не могу.

Максим

19 октября 2016, 17:33

Ссылка

Павел Гвоздь

07 декабря 2016, 02:40

Понимаю, что бесчеловечно затянул. Тем не менее сообщу, что данный баг поправлен в версии 1.0.5.

Максим

28 июля 2017, 09:14

Запоздалое спасибо))

Павел

04 ноября 2016, 18:36

Подскажите пожалуйста… Если возможность обновить css файл, который берёт данные у файла scss файла в ручную? К примеру через Consol.

Сейчас это работает вручную, хочется также научиться обновлять файлы в своих скриптах

Павел Гвоздь

04 ноября 2016, 18:52

Не ясен вопрос, опишите конкретнее.

Павел

06 ноября 2016, 15:49

как обновить css файл, когда я уже сделал изменения в файле scss, не через плагин (в данном случае при сохранение файла scss), а через php-скрипт

Павел

09 ноября 2016, 12:35

Вообщем я разобрался, как работать с классом. Всё хорошо отрабатывается, только предупреждение есть:

[2016-11-09 12:33:41] (WARN @ /www/core/xpdo/xpdo.class.php : 542)
Could not load package metadata for package compiler.

Павел Гвоздь

07 декабря 2016, 02:39

Поправил в версии 1.0.5.

Максим

28 июля 2017, 09:16

а можно поподробнее? вдруг тоже пригодится))

Алекс

19 декабря 2016, 21:27

Крутотень.Большое спасибо.

Николай Савин

30 декабря 2016, 23:42

Как новичок в использовании SCSS, никак в толк не возьму, зачем отдельно компилировать мой SCSS в CSS, я подключаю файл в minifyx и все прекрасно работает. Ну конечно я понимаю вопрос с кэшированием. Кроме этого разница есть между Compiler и Minifyx?

Павел Гвоздь

05 января 2017, 14:51

Разница в том, что Compiler собирает CSS в момент сохранения файла, а MinifyX в момент обращения к странице. То есть, если надо скомпилить большой SCSS, то это будет происходить на стороне юзера, пусть и единожды (до сброса кеша), но это не очень приятно будет для него.

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

Сергей Шлоков

21 января 2018, 20:05

А почему нельзя было в Console запустить сниппет? Гораздо быстрее, чем ваять новый компонент.

Павел Гвоздь

22 января 2018, 12:20

К чему этот вопрос, Сергей?

Василий Столейков

27 июля 2017, 09:46

Только у меня код

@import '_media';

вместо включения этого файла в основной импортируется так:

@import url("/assets/path/src/scss/_media");

Максим

27 июля 2017, 19:09

@import 'media';

Василий Столейков

27 июля 2017, 20:37

@import 'media'; // вызываю
@import url("/assets/path/src/scss/media"); // получается

@import 'media.scss'; // вызываю
@import url("/assets/path/src/scss/media.scss"); // получается

@import '_media.scss'; // вызываю
@import url("/assets/path/src/scss/_media.scss"); // получается

@import '_media'; // вызываю
@import url("/assets/path/src/scss/_media"); // получается

Чувствую дело не в написании, просто не инклудится файл — приходится всё писать в одном файле.
Весь же остальной SCSS-код работает безупречно.

Максим

28 июля 2017, 08:36

У меня вот так на одном проекте сделано…

Есть файлы

/assets/styles/scss/main.scss
/assets/styles/scss/_filename1.scss
/assets/styles/scss/_filename2.scss

В main.scss написано:

@import 'filename1';
@import 'filename2';

В настройках:

compiler_scss_dir_from = /assets/styles/scss/
compiler_scss_dir_to = /assets/styles/css/
compiler_scss_skip_underscore = true
compiler_scss_with_subdirs = true

Все работает нормально при компиляции main.scss

Василий Столейков

28 июля 2017, 08:56

Т.е. его содержимое переносится при компиляции.

так в том-то и дело, что у меня содержимое не переносится и на выходе получается обычный @import, вместо переноса содержимого в 1 файл.

P.S. Короче, создал тестовый сайт на модхосте и потестировал по-разному — импорт выполняется полноценно. Я же работал на другом хостинге (hvosting.ua), видно хостинг какой-то левый, что-то там нужное не включено…
Интересно, что требуется от хостинга, чтобы работал правильно @import?

Максим

28 июля 2017, 09:12

ХЗ, последнее что приходит в голову — удалить и установить компонент заново ))
Ну и еще раз посмотреть в документацию, может чего найдешь полезного ))
sass-scss.ru/documentation/pravila_i_direktivi/direktiva_import.html

П.С. у меня @import 'filename' идет в самом верху после импорта *.css. Может как то влияет тоже?)))

Василий Столейков

20 октября 2017, 09:36

Есть ли такой же компонент, который во время сохранения js-файлов из какой-то папки компилировал бы один сжатый js, который можно будет потом подключать к сайту?
То есть чтобы он работал по принципу Compiler — компилировал не как MiniFix на ходу, а во время сохранения файла.

Василий Столейков

20 октября 2017, 09:58

Если бы Павел добавил в Compiler возможность сжимать и js-ки, было бы удобно!

Дмитрий

10 января 2018, 16:47

у плагина есть возможность генерации souce map?

Павел Гвоздь

10 января 2018, 18:17

Нет.

Alex

31 января 2018, 17:45

На PHP7.0 никто не наблюдал ошибок?
При сохранении висит «Подождите». Скрипт вешается на точке

$cssData = $Compiler->Munee($pathinfo['dirurl'] . $pathinfo['basename']);

Павел Гвоздь

01 февраля 2018, 11:06

А в логе ошибок PHP что?

DeleteMePlease

18 сентября 2018, 11:12

Как мне не хватало такой штуки, жаль, что только сейчас додумался поискать, спасибо огромное )

DeleteMePlease

19 сентября 2018, 12:27

Правда заметил, что calc при компиляции игнорируется

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.

Здесь упомянуты:

Компонент	Текущая версия	Закачки
Compiler	1.0.5-beta от 07.12.2016	392
SCSS	2.0.4-pl от 25.06.2023	142
MinifyX	1.7.1-pl от 25.03.2019	14 229