Magento2: Erzeugen Sie die CSS-Datei im Ordner pub / static neu

Ich habe Magento 2 installiert und den Entwicklermodus eingestellt, dann habe ich ein Modul installiert, das CSS- und JS-Dateien enthält. Das Modul funktioniert einwandfrei und CSS- und JS-Dateien werden aus dem Ordner pub / static gerendert. Jetzt habe ich CSS-Änderungen in der CSS-Datei des Modulverzeichnisses vorgenommen und den Befehl ausgeführt

php bin/magento setup:static-content:deploy

Aber Magento nimmt keine neuen Änderungen an pub / static-CSS-Dateien vor, so dass ich alte CSS-Dateiinhalte erhalte. Weiß jemand, wie man die gesamte CSS-Datei im Pub / Static-Ordner regeneriert?

Erstellen Sie vor dem Löschen von pub / static ein Backup von pub / static / .htaccess und stellen Sie es wieder her. Andernfalls werden alle CSS und JS 404-Fehler anzeigen!

1. Entfernen Sie pub/static[Halten Sie die .htaccess-Datei gesichert und kopieren Sie sie erneut.]
   2. Entfernen var/cache
   3. Entfernen var/composer_home
   4. Entfernen var/generation
   5. Entfernen var/page_cache
   6. Entfernen var/view_preprocessed
   7. Lauf php bin/magento setup:static-content:deploy

Antworten hier erwähnen nicht, dass Sie den .htaccess im pub / static-Ordner nicht löschen sollten .

Um alle Dateien mit Ausnahme der .htacces zu löschen, geben Sie das Verzeichnis pub / static ein und führen Sie es aus

find . -depth -name .htaccess -prune -o -delete

dann kannst du rennen

rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ 

Ich habe gerade die CSS-Dateien aus dem pub/staticOrdner gelöscht und den Befehl ausgeführt:

php bin/magento setup:static-content:deploy

Es wird dieselbe Datei mit den letzten Änderungen neu generiert.

Da ist die Frage nach js and cssUpdate in Magento 2 im Entwicklermodus .

1. Aktualisieren Sie das JS in Ihrem angesehenen Modul, bevor Sie dieselbe Datei von der Seite aktualisieren.pub/static/frontend/namespace/theme/ ... module/js/... Löschen Sie sie, damit nach der Seitenaktualisierung eine neue JS-Datei im Pub-Ordner erstellt wird.
2. Aktualisieren Sie das CSS in Ihrem respektierten Modul, indem Sie Punkt 1 ausführen.
3. Aktualisierung der Less- Datei

Setup Theme in Magento ...\dev\tools\grunt\configs\themes.js

Klonen Sie ein Theme-Beispiel- Luma-Theme zu Ihrem Theme und weisen Sie einen Namen zu, vorausgesetzt, xyz

xyz: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }

Ändern Sie im Stammverzeichnis den Dateinamen: Gruntfile.js.sample in Gruntfile.js

Ändern Sie im Stammverzeichnis den Dateinamen: package.json.sample in package.json

Muss grunzen in Ihrem Site-Ordner haben, sonst über npm installieren

Öffnen Sie die Eingabeaufforderung mit Administratorberechtigung

Gehen Sie zum grunt exec:themeersten Mal nach dem Bereitstellen des Themas zum Site-Ordner in CMD & hit command

Dann grunt less:theme jedes Mal, wenn wir Änderungen in weniger machen

Wenn Sie häufig Änderungen bei geringerem Gebrauch vornehmen grunt watch, wird dies automatisch ausgelöstgrunt less:theme

Hinweis: Möglicherweise wird ein Symlink- Fehler .../app/etc/di.xmlangezeigt. Wechseln Sie in Ihre lokale Datei, und kommentieren Sie den Code (unter dem Code) aus oder entfernen Sie ihn, bis die Entwicklung abgeschlossen ist. Übertragen Sie den verschlüsselten Code dieser Datei nicht auf den Server, er wird nur bei Bedarf in der lokalen Datei benötigt.

<item name="view_preprocessed" xsi:type="object">Magento\Framework\App\View\Asset\MaterializationStrategy\Symlink</item>

Einfacher Weg 1

Im Magento Admin. Gehen Sie zu System > Tools > Cache Managementund klicken Sie auf Flush Static Files Cache .

Einfacher Weg 2

Wenn Sie gerade die bereits vorhandene CSS-Datei geändert haben , müssen Sie nur die entsprechende Datei in löschen. pub/staticWenn Sie die Seite aktualisieren, wird die neue Version der CSS-Datei generiert. Es funktioniert im Entwicklermodus .

Beachten

1. Wenn Sie eine neue Datei erstellen, anstatt eine vorhandene Datei zu ändern, müssen Sie möglicherweise auch den Cache leeren php bin/magento cache:flush.

2. Standardmodus und Entwicklermodus müssen keine statischen Ansichtsdateien bereitstellen , da statische Dateien dynamisch generiert und nicht materialisiert werden. (Referenz: Über Magento-Modi )

3. Im Produktionsmodus benötigen Sie möglicherweise auchphp bin/magento setup:static-content:deploy und php bin/magento cache:flush, ich versuche es noch nicht im Produktionsmodus .

Ok, basierend auf dem, was ich in verschiedenen anderen Posts gelesen habe und meiner persönlichen Erfahrung hier, ist der Prozess, um das CSS oder einen statischen Inhalt neu zu generieren:

php bin/magento setup:upgrade

Dadurch werden alle erforderlichen Cache- / Generierungs- / usw.-Dateien gelöscht, ohne dass tatsächlich benötigte Daten gelöscht werden.

php bin/magento setup:di:compile

Dadurch werden die Dateien neu kompiliert. Zuletzt:

php bin/magento setup:static-content:deploy

Nach dem letzten Befehl sollte alles neu und frisch sein, aktualisieren Sie einfach Ihre Seite.

----- Anmerkungen ------

1) Vergewissern Sie sich, dass Ihre Dateiberechtigungen und der Eigentümer: Benutzergruppe richtig eingestellt sind, bevor Sie dies tun. Möglicherweise müssen Sie mit Ihrem Systemadministrator darüber sprechen.

2) Wenn der Befehl setup: upgrade fehlschlägt, werden möglicherweise die Dateien gelöscht und die neuen können nicht geschrieben werden, wie dies bei mir aufgrund von Dateiberechtigungen der Fall war. Hierdurch kann Ihre Site beschädigt werden. Sie müssen lediglich die Berechtigungen ausbügeln und den Befehl erneut ausführen.

3) Ich habe (bisher) keine Möglichkeit gefunden, nur ein bestimmtes Thema oder eine bestimmte Datei neu zu kompilieren (wäre super hilfreich, wenn jemand einen Weg findet), ohne ein vollständig benutzerdefiniertes Skript zu schreiben

Wenn jemand etwas besseres weiß, lassen Sie es mich wissen, denn 12 Minuten Kompilieren von Dateien, weil ich einige CSS-Änderungen vornehmen musste, ist in meinen Augen ein äußerst schlechtes Design.

--- Bearbeiten ---

In Magento 2 ist Grunt eingebunden, was das Aktualisieren von CSS / WENIGER-Dateien unendlich erleichtert, wenn Sie sich die Zeit nehmen, diese zu konfigurieren. Die meisten Dateien sind als .sample-Dateien vorhanden. Entfernen Sie einfach die .sample-Dateierweiterung und konfigurieren Sie die Datei themes.js im Ordner / dev / tools / grunt / configs. Wenn Sie dann Ihre WENIGER-Dateien aktualisieren müssen, führen Sie einfach weniger Grunzen aus: - Theme- - über die Befehlszeile.

Ressource: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html

Vergessen Sie nicht, die Befehle " grunt exec:theme," grunt less:themeauszuführen. Dabei themehandelt es sich um das Thema, das Sie in der themes.jsDatei im Konfigurationsordner von grunt deklariert haben (alles im Entwicklerhandbuch). Wenn Sie Magento im Entwicklermodus haben, sollten Sie den Befehl "static deploy" nicht ausführen. Magento2arbeitet mitSymlinks

Führen Sie diese Befehle in Ihrem Magento- Stammordner aus:

alias mage="php -d memory_limit=-1 -f bin/magento"

chmod -R 775 pub/static/ var/ pub/media/ &&
rm -rf var/view_preprocessed/ var/cache/ var/page_cache/ var/tmp/ var/generation/ pub/static/frontend/ ;
mage cache:flush &
mage indexer:reindex &
mage setup:upgrade &&
mage setup:static-content:deploy ; 
mage setup:db-data:upgrade &&
mage dev:source-theme:deploy &&
chmod -R 775 pub/static/ pub/media/ var/

Zu dieser Frage ist eine wichtige Anmerkung zu machen, auf die in den meisten Antworten nicht ausdrücklich hingewiesen wird. In Ihrem Fall (mit dem Setup, das Sie verwenden) wird der Grund, warum Ihre CSS-Änderungen nicht übernommen werden, wenn Sie das CSS in den pub/staticOrdner neu generieren, darin bestehen, dass Sie den Inhalt des var/view_preprocessedDirektors nicht entfernen . In diesem Verzeichnis befinden sich zwischengespeicherte Versionen Ihres CSS, die pub/staticbeim Ausführen des php bin/magento setup:static-content:deployBefehls in den Ordner gezogen werden .

Wenn Sie also neu kompilieren, sucht Magento zuerst im var/view_preprocessedOrdner nach dem zwischengespeicherten CSS. Wenn dieser Ordner leer ist, wird nach den Themendateien gesucht und das CSS zum Kompilieren abgerufen.

Diese Einstellungen sind konfigurierbar. Sie haben also viele Möglichkeiten, an Ihr Ziel zu gelangen, um den Weg zu ändern, den Sie einschlagen müssen. Aber für die Lösung Ihres spezifischen Setups:

1. Entfernen Sie die Dateien aus dem pub/staticOrdner:rm -rf pub/static/*

2. Entfernen Sie die Dateien aus dem var/view_preprocessedOrdner:rm -rf var/view_preprocessed/*

3. Kompilieren Sie den statischen Pub-Ordner neu: php bin/magento setup:static-content:deploy

4. Cache leeren ist aktiviert: php bin/magento cache:clean

5. Aktualisieren Sie den Browser.

Entfernen Sie den Ordner, der Ihr Thema enthält
, aus dem Cache pub / static / frontend clear.
Sie können grunt verwenden, um das Anwenden von Stylesheets zu beobachten. Lesen Sie hier

1. Pub Static entfernen.
2. Gib pub/static777 Erlaubnis
3. Cache leeren.
4. Lauf: php bin/magento setup:static-content:deploy

Du wirst neue CSS sehen.

HINWEIS:

Erteilen Sie die entsprechenden Ordner- und Dateiberechtigungen.

Ich hoffe, dies wird dir helfen.

Könnten Sie nicht einfach den statischen Cache im Admin-Bereich leeren und dann

run php bin/magento setup:static-content:deploy

Stellen Sie sicher, dass Sie den Entwicklermodus verwenden.

Führen Sie dann folgenden Code aus:

chmod -R 777 var generated pub/static
grunt exec:default
grunt less:your_theme_name

Aktualisieren Sie die Frontend-Seite. Diese Schritte haben mein Problem gelöst.

Sie können jedoch das Flag -foder --forcezum Setup-Befehl hinzufügen .

Beispiel:

php bin/magento setup:static-content:deploy -f

Ich werde mein Weisheitströpfchen hier fallen lassen.

Ich verwende ein cache_fly.shBash-Skript, das im Grunde Folgendes bewirkt:

#!/bin/bash
start=`date +%s%N`
./magento setup:upgrade && \ 
./magento cache:flush && \ 
./magento setup:static-content:deploy -f
end=`date +%s%N`
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"

HINWEIS: Ich habe ein Echo hinzugefügt, um zu zeigen, wie viel Zeit meines Lebens ich damit verbracht habe, darauf zu warten, dass es ausgeführt wird. Ist auch ./magentoein Skript zum Ausführen php bin/magentooder Aufrufen des gleichen Vorgangs im Docker-Container. Wenn Docker verwendet wird, können Sie es erstellen oder darauf verweisen. php bin/magentoWenn Sie dies jedoch lesen, sollten Sie wissen, wovon ich spreche. Wenn nicht, fragen Sie bitte für Hilfe.

Kleine Anpassung für meinen Fall

#!/bin/bash
start=`date +%s%N`
chmod -R 775 pub/static/ var/ pub/media/ && \
rm -rf var/view_preprocessed/* var/cache/* var/page_cache/* var/tmp/* var/generation/* pub/static/frontend/* && \
./magento cache:flush && \
./magento setup:upgrade && \
./magento cache:clean && \
./magento s:s:d es_ES en_US -f && \
./magento setup:di:compile && \
chmod -R 775 pub/static/ pub/media/ var/
end=`date +%s%N
runtime=$(bc <<< "scale=9;($end-$start)/1000000000")
echo "" && echo "" && echo -e "\e[34mTOTAL EXECUTION TIME: \e[1m\e[93m$runtime\e[0m"