Neu Auto-Compiling von Themes-LESS

[mediaDESIGN.SK]

Hallo,
ich modifiziere für Shops die Themes und bearbeite dazu laufend die LESS-Scripte. Es nervt jedoch sehr, dass man dazu immer erst nach jeder kleinen Änderungen im Theme-Editor-Plugin die Kompilierung veranlassen muss.
Hier https://opensource-blog.de/jtl-shop-4-template-less-auto-kompilieren/ habe ich einen vielversprechenden Lösungsvorschlag gefunden, der es ermöglichen soll, dass bei jedem Frontend-Seitenreload die Kompilierung automatisch stattfindet. Aus anderen CMS/ Shop-Systemen kenne ich ähnliche Möglichkeiten eine Entwicklermodus zu aktivieren.

Leider bekomme ich im Frontend dann einen Fehler, wenn ich das wie in dem Beitrag beschrieben implementiere

{"fn":"message","data":{"type":"danger","msg":"CSRF-Token fehlt."}}

. Sieht nach eine JSON-Objekt aus. Es funktioniert also nicht.

Der Link deutet an, dass eine Lösung für Shop 4 eigentlich ganz einfach wäre. Deshalb wundere ich mich, dass das nicht von Haus aus als Entwicklermodus-Feature angeboten wird. Wäre doch echt eine enorme Erleichterung.

Nun also meine Fragen:

• Kenn jemand eine Lösung wie man das mit der LESS-Kompilierung eleganter hinbekommt?
• Gibt es evlt. ein ähnlich versteckte Funtion wie

  define('PLUGIN_DEV_MODE', 0);

  mit der man das in der Shop-Ini veranlassen kann?

 

[css-umsetzung]

Du arbeitest doch bestimmt auch mit einem Child Template, bau dir doch dort eine Überwachung ein die schaut, ob die less Dateien jünger sind als die bootstrap Datei.

Ich habe so etwas in meinem Child integriert, über die Einstellungen kann ich dann bestimmen ob es eine Überwachung gibt oder nichts oder es dauerhaft neu generiert wird.

 

[mediaDESIGN.SK]

Ja, ich arbeite mit einem Evo- Child-Template.
Wie man so eine "Überwachung" einbaut, überfordert jedoch mein bisher erkämpftes Wissen.
Habe gerade erst mein erstes Plugin geschrieben (E-Mail-Cloaking/Verschleierung).

 

[css-umsetzung]

Das regelst du dann alles in deiner functions.php du brauchst hierfür kein Plugin.

Ich mach daraus auch kein Geheimnis wie ich das ganze angegangen bin: hier der Teil der in meiner function.php dafür verantwortlich ist, eventuell hilft dir das als Einstieg:

include_once $smarty->get_template_vars('parent_template_path').'php/functions.php';


$cssTemplateConfig = \Shop::getSettings(array(CONF_TEMPLATE, CONF_CACHING));
$cssTemplateDir = $smarty->__get('template_dir')['frontend'];
$cssThemePath = $cssTemplateDir.'themes/'.$cssTemplateConfig['template']['theme']['theme_default'].'/';


function cssCompileLess($cssThemePath='',$cssTemplateDir='',$cssTemplateConfig=array(), $lessFile='', $cssFile='') {
    global $smarty;
    if(($dir = opendir($cssThemePath.'less'))) {
        $lasttime = @filectime($cssThemePath.$cssFile);
        while ($file=readdir($dir)) {
            if($cssTemplateConfig['template']['general']['CompileCss']=='A' || !$lasttime || $file != '.' && $file != '..' &&  $lasttime <  filectime($cssThemePath.'/less/'.$file)) {
                closedir($dir);

                \Shop::Cache()->flush('tpl_mnfy_dt_.'.$cssTemplateConfig['template']['theme']['theme_default'].basename($smarty->get_template_vars('parent_template_path')).'.fcache');

                 require_once $cssTemplateDir.'php/Less/Autoloader.php';
                Less_Autoloader::register();
                $parser = new Less_Parser();

                $parser->parseFile($cssThemePath.'less/'.$lessFile,'/');
                $css = $parser->getCss();

                file_put_contents($cssThemePath.$cssFile, $css);

                break;
            }
        }
    }
}

if($cssTemplateConfig['template']['general']['CompileCss']!='N')    {
    cssCompileLess($cssThemePath,$cssTemplateDir,$cssTemplateConfig,'theme.less','bootstrap.css');
}

Wie du hier siehst bringe ich mit meinem Child einen eigenen Less Compiler mit, da ich dann weiß wo er liegt und was er macht.


in der Template.xml habe ich dann das hier:

        <Section Name="Allgemein" Key="general">
            <Setting Description="less compiler" Key="CompileCss" Type="select" Value="N">
                <Option Value="N">Nein</Option>
                <Option Value="A">dauerhaft aktivieren</Option>
                <Option Value="U"><![CDATA[&Uuml;berwachungsmodus]]></Option>
            </Setting>
        </Section>

 

[elevennerds.de]

filemtime() gibt Dir den Zeitpunkt der letzten Änderung zurück.

 

[mediaDESIGN.SK]

Recht herzlichen Dank.
Musste natürlich erst den Autoloader bei mir reinbasteln, damit es funktioniert.
Super! Produktivität um 50% gesteigert!

Bei A wird immer zwingend kompiliert, bei U nur wenn neue Scriptversionen vorliegen?

 

[css-umsetzung]

genau

 

[webksde]

Tausend Dank @css-umsetzung, ein Traum!

Kleine Anpassung:

Ihr könnt auch den Release statt des source codes von: https://github.com/oyejorge/less.php nutzen.

Einfach diese beiden Zeilen ersetzen:

require_once $cssTemplateDir.'php/Less/Autoloader.php';
Less_Autoloader::register();

gegen:

require_once $cssTemplateDir.'php/Less/Less.php';

=================

EDIT:

Option für Sourcemap Generierung ergänzt:

template.xml:

<Setting Description="less sourcemap" Key="LessSourcemap" Type="select" Value="N">
   <Option Value="N">Nein</Option>
   <Option Value="Y">Ja</Option>
</Setting>

functions.php:

Zeile ersetzen $parser = new Less_Parser();

$options = array(
  'sourceMap' => $cssTemplateConfig['template']['general']['LessSourcemap'] == 'Y' ? true : false
);
$parser = new Less_Parser($options);

 

[ckOne]

Gibt es hierzu schon ein Beispiel wie man den AutoCompiler in JTL- Shop 5 am Besten realisieren kann?
Vielen Dank!