Neu Auto-Compiling von Themes-LESS

  • Wenn Ihr uns das erste Mal besucht, lest euch bitte zuerst die Foren-Regeln durch.
7. Januar 2019
8
1
Gera (Thüringen)
#1
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
Code:
{"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
    Code:
    define('PLUGIN_DEV_MODE', 0);
    mit der man das in der Shop-Ini veranlassen kann?
 

css-umsetzung

Offizieller Servicepartner
SPBanner
6. Juli 2011
3.759
509
Berlin
#2
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.
 
7. Januar 2019
8
1
Gera (Thüringen)
#3
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

Offizieller Servicepartner
SPBanner
6. Juli 2011
3.759
509
Berlin
#4
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:

Code:
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:

Code:
        <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>
 
Zuletzt bearbeitet:
Zustimmungen: mediaDESIGN.SK
7. Januar 2019
8
1
Gera (Thüringen)
#6
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?
 

webksde

Aktives Mitglied
30. August 2012
30
0
32457 Porta Westfalica
#8
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:

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

PHP:
require_once $cssTemplateDir.'php/Less/Less.php';
=================

EDIT:

Option für Sourcemap Generierung ergänzt:

template.xml:

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();

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