Magento2: Re generar archivos CSS en la carpeta pub / static

51

Instalé Magento 2 y configuré el modo desarrollador, luego instalé un módulo que contiene archivos css y js. El módulo funciona bien y los archivos css y js se procesan desde la carpeta pub / static. Ahora he realizado cambios en CSS en el directorio de módulos del archivo CSS y ejecuto el comando

php bin/magento setup:static-content:deploy

pero Magento no está haciendo mis nuevos cambios en los archivos pub / static css, así que obtengo el contenido del archivo css antiguo. ¿Alguien sabe cómo regenerar todo el archivo css en la carpeta pub / static?

Chirag Dodia
fuente
8
FYI: Magento 2 tiene un modo de desarrollador para que no tenga que implementar contenido estático todo el tiempo. Perdí horas y horas en el último mes volviendo a implementar contenido estático. Así que no seas como yo, y cambia al modo desarrollador (en tu máquina local. Tu servidor en vivo debería estar en modo producción)
Nathan Merrill
¿Por qué regenerar con una versión diferente? Tengo un problema con la versión del archivo de implementación que no coincide. magento.stackexchange.com/questions/94502/…
Magento2 Devloper
3
Si magento está en modo desarrollador, creará enlaces simbólicos a los archivos estáticos, pero para que esto suceda, debe tener un .htaccessarchivo en la pub/staticcarpeta para que sepa cómo vincular archivos, si eliminó la carpeta pub / estática que .htaccessfalta ahora
Vlad Patru
@NathanMerrill tiene razón, pero la mayoría de los desarrolladores no leen la documentación y todas las respuestas y aún ejecutan el contenido estático: despliegue el comando y lo que es un poco triste es que algunas de las empresas con cuenta en Stackexchange proporcionan respuestas como esa , pérdida de tiempo
Vlad Patru

Respuestas:

69

Antes de eliminar pub / static haga una copia de seguridad de pub / static / .htaccess y restaure nuevamente. de lo contrario, todos sus css y js mostrarán un error 404.

  1. Eliminar pub/static[Mantenga copia de seguridad del .htaccess y cópielo de nuevo]
    1. Eliminar var/cache
    2. Eliminar var/composer_home
    3. Eliminar var/generation
    4. Eliminar var/page_cache
    5. Eliminar var/view_preprocessed
    6. correr php bin/magento setup:static-content:deploy
Solución de mago
fuente
48
M2 no hace las cosas muy amigables para el desarrollador.
Matthew McLennan
10
@CarComp, ningún archivo debería eliminarse manualmente. Magento debería encargarse de eso. es muy molesto
Claudiu Creanga 03 de
10
U debe ser nuevo en magento;)
CarComp
66
Creo que al eliminar pub / static también se pierde el archivo .htaccess que es importante para evitar errores 404, está bien eliminar las subcarpetas de pub / static, pero ese .htaccess debe conservarse
Elio Ermini
3
Soy nuevo en "magento". WAT? ¿Es la forma oficial de actualizar CSS?
puchu
20

Las respuestas aquí no mencionan que no debe eliminar .htaccess en la carpeta pub / static.

para eliminar todos los archivos excepto los .htacces ingrese al directorio pub / static y ejecute

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

entonces puedes correr

rm -rf var/cache/ var/generation/ var/page_cache/ var/view_preprocessed/ 
Claudiu Creanga
fuente
¿Por qué regenerar con una versión diferente? Tengo un problema con la versión del archivo de implementación que no coincide. magento.stackexchange.com/questions/94502/…
Magento2 Devloper
1
no funcionó como se esperaba
d
11

Acabo de eliminar los archivos CSS de la pub/staticcarpeta y ejecuto el comando:

php bin/magento setup:static-content:deploy

Regenerará el mismo archivo con los últimos cambios.

Chirag Dodia
fuente
¿Por qué regenerar con una versión diferente? Tengo un problema con la versión del archivo de implementación que no coincide. magento.stackexchange.com/questions/94502/…
Magento2 Devloper
9

Como la pregunta es para js and cssactualizar en Magento 2 en modo desarrollador .

  1. Actualizando el JS en su módulo respetado, antes de actualizar la página, el mismo archivo se pub/static/frontend/namespace/theme/ ... module/js/...eliminará, por lo que después de actualizar la página, se generará un nuevo archivo JS en la carpeta pub.
  2. Actualizando el CSS en su respetado módulo, haga el pt 1.
  3. Actualizando menos archivo

Configurar tema en magento ...\dev\tools\grunt\configs\themes.js

Clone cualquier tema de ejemplo, tema de luma a su tema y asigne un nombre, suponga xyz

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

En la carpeta raíz, cambie el nombre del archivo: Gruntfile.js.sample a Gruntfile.js

En la carpeta raíz, cambie el nombre del archivo: package.json.sample a package.json

Necesita tener gruñido en la carpeta de su sitio o instalar a través de npm

Abrir símbolo del sistema con permiso de administrador

Vaya a la carpeta del sitio en CMD y presione el comando grunt exec:themepor primera vez después de implementar el tema

Entonces grunt less:theme cada vez que hagamos algún cambio en menos

Si está haciendo cambios frecuentes en menos uso, grunt watchpor lo tanto, golpeará automáticamentegrunt less:theme

Nota: es posible que obtenga un error de enlace simbólico, así que vaya al archivo .../app/etc/di.xmly comente o elimine el código (código debajo) en su local hasta que se complete el desarrollo, no envíe el código modificado de este archivo al servidor, solo se requiere en local si es necesario.

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

Manera simple 1

En el administrador de Magento. Vaya System > Tools > Cache Managementy haga clic en Vaciar caché de archivos estáticos .

Manera simple 2

Si acaba de cambiar el archivo CSS que ya existente , lo que hay que hacer es simplemente borrar el archivo correspondiente pub/staticy, a continuación, al actualizar la página, que va a generar la nueva versión del archivo CSS. Funciona en modo desarrollador .


Aviso

  1. Al crear nuevo archivo, en lugar de modificar un archivo existente, es posible que tenga que borrar la caché, php bin/magento cache:flush.

  2. El modo predeterminado y el modo desarrollador no necesitan implementar archivos de vista estáticos , debido a que los archivos estáticos se generan dinámicamente en lugar de materializarse. (Referencia: sobre los modos Magento )

  3. En el modo de producción , es posible que también necesite php bin/magento setup:static-content:deployy php bin/magento cache:flush, aún no pruebo el modo de producción .

Key Shang
fuente
6

De acuerdo con lo que he leído en otras publicaciones y mi experiencia personal aquí es el proceso para regenerar el CSS o cualquier contenido estático:

php bin/magento setup:upgrade

Esto eliminará todos los archivos de caché / generación / etc. necesarios sin eliminar todo lo que realmente necesita.

php bin/magento setup:di:compile

Esto volverá a compilar los archivos. Finalmente:

php bin/magento setup:static-content:deploy

Después del último comando, todo debería ser nuevo y fresco, simplemente actualice su página.

----- Notas ------

1) Asegúrese de que sus permisos de archivo y propietario: el grupo de usuarios esté configurado correctamente antes de hacer esto, es posible que deba hablar sobre esto con su administrador de sistemas.

2) Si su configuración: el comando de actualización falla, podría eliminar los archivos y no poder escribir los nuevos, como fue mi caso debido a los permisos de archivo. Esto puede romper su sitio, simplemente elimine los permisos y luego vuelva a ejecutar el comando.

3) No he encontrado (hasta ahora) una forma de volver a compilar solo un tema o archivo específico (sería muy útil si alguien encuentra una manera) sin escribir un script completamente personalizado

Si alguien sabe de algo mejor, hágamelo saber, porque 12 minutos de compilación de archivos porque tuve que hacer algunos cambios de CSS es un diseño extremadamente pobre en mis ojos.

--- Editar ---

Magento 2 tiene a Grunt vinculado y esto hace que la actualización de archivos CSS / LESS sea infinitamente más fácil si se toma el tiempo para configurarlo. La mayoría de los archivos están allí como archivos .sample simplemente elimine la extensión de archivo .sample, configure el archivo themes.js en la carpeta / dev / tools / grunt / configs. Luego, cuando necesite actualizar sus MENOS archivos, simplemente ejecute gruñido menos: - tema-- desde la línea de comandos.

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

Vallier
fuente
Deje de proporcionar la configuración de php bin / magento: contenido estático: método de implementación, en modo desarrollador magento tiene enlaces simbólicos
Vlad Patru
Ah, y eliminar manualmente las carpetas, eliminar los archivos .htaccess y otros no relacionados, y forzarlo a reconstruir es el mejor método. Agregué un comentario sobre el uso de Grunt, porque simplemente mover su tienda al modo desarrollador no crea una instancia de todos los enlaces simbólicos y actualiza su CSS en la recarga de la página.
Vallier
6

no olvide ejecutar los comandos grunt exec:theme, grunt less:themedonde themeestá el tema que declaró en el themes.jsarchivo desde la carpeta de configuración de grunt (todo esto está en la guía del desarrollador) y cuando tiene magento en modo desarrollador no debe ejecutar el comando de implementación estática, Magento2funciona conSymlinks

Vlad Patru
fuente
1
"cuando tienes magento en modo desarrollador no deberías ejecutar el comando de despliegue estático" <- Esto fue extremadamente útil para mí. ¡Gracias! Acabo de eliminar el contenido del directorio pub / static (a excepción de .htaccess, por supuesto), actualicé la página y se generaron automáticamente los símbolos de mis archivos CSS. Ahora puedo editarlos sobre la marcha. ¿Quién dijo que Magento 2 no es amigable para los desarrolladores? Solo necesito saber cómo usarlo, supongo.
Rooster242
1
Hola, gracias amigo, gruñe menos: por defecto resolvió el problema
Yusuf Ibrahim
6

Ejecute estos comandos en su carpeta raíz de Magento :

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/
Rafael Corrêa Gomes
fuente
Nunca pensé en ejecutar un reindex en segundo plano 👍🏻
Sergei Filippov
¿Soy yo o son estos comandos de Magento 1 en respuesta a una pregunta de Magento 2?
Barry
No hay comandos de Magento 1, son de Magento 2
Rafael Corrêa Gomes
6

Hay una nota importante que hacer sobre esta pregunta que la mayoría de las respuestas no señalan específicamente. En su caso (con la configuración que está utilizando), la razón por la que sus cambios de CSS no se recogen cuando regenera el CSS en la pub/staticcarpeta es que no está eliminando el contenido del var/view_preprocesseddirector. Dentro de este directorio hay una versión en caché de su CSS que está ingresando a la pub/staticcarpeta cuando ejecuta el php bin/magento setup:static-content:deploycomando.

Entonces, cuando recompila, Magento primero buscará en la var/view_preprocessedcarpeta el CSS en caché. Si esta carpeta está vacía, buscará los archivos de tema y extraerá ese CSS para su compilación.

Estos ajustes son configurables, por lo que hay muchas maneras de llegar a su destino que cambiarán el camino que debe seguir. Pero para la solución a su configuración específica:

  1. Eliminar los archivos de la pub/staticcarpeta:rm -rf pub/static/*

  2. Eliminar los archivos de la var/view_preprocessedcarpeta:rm -rf var/view_preprocessed/*

  3. Vuelva a compilar la carpeta estática de pub: php bin/magento setup:static-content:deploy

  4. Borrar caché está encendido: php bin/magento cache:clean

  5. Actualiza el navegador.

Círculosix
fuente
1
sería bueno si magento2 creara enlaces simbólicos a esos archivos afectados en modo desarrollador, luego los cambios en los archivos de los módulos estén visibles sobre la marcha
roman204
Lo hace, pero no he entendido el cuándo y el cómo, pero no mencioné esto en la respuesta. Hay archivos de configuración global que pueden configurar esto en su app/etc/di.xmlarchivo di.xml ( ). Pero he tenido resultados mixtos durante las pruebas. Hay un poco más aquí en la segunda respuesta: magento.stackexchange.com/questions/116605/…
circlesix
5

Elimine la carpeta que contiene su tema en el
caché claro pub / static / frontend
Puede usar gruñido para ver aplicar hojas de estilo. Leer aquí

mrtuvn
fuente
¿Por qué regenerar con una versión diferente? Tengo un problema con la versión del archivo de implementación que no coincide. magento.stackexchange.com/questions/94502/…
Magento2 Devloper
5
  1. Eliminar pub estático.
  2. Dar pub/staticpermiso 777
  3. Limpiar cache.
  4. Correr: php bin/magento setup:static-content:deploy

Verás nuevo CSS.

NOTA:

Dé la carpeta y el permiso de archivo adecuados.

Espero que esto ayude.

denish vachhani
fuente
"Verás un nuevo CSS". - No lo hice pero gracias
Barry
4

¿No podría simplemente vaciar la caché estática en el panel de administración y luego

run php bin/magento setup:static-content:deploy
babywit
fuente
1

Asegúrate de estar usando el modo desarrollador.

Luego ejecute el siguiente código:

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

Actualice la página frontend. Estos pasos resolvieron mi problema.

Yusuf Ibrahim
fuente
bien, realmente me ayuda gracias
Yoesoff
0

Sin embargo, puede agregar el indicador -fo --forceal comando de configuración.

Ejemplo:

php bin/magento setup:static-content:deploy -f
Yamen Ashraf
fuente
0

Voy a dejar caer mi gota de sabiduría aquí.

Yo uso un cache_fly.shscript bash que básicamente hace:

#!/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"

NOTA: He agregado un eco para mostrarme cuántas veces de mi vida he perdido esperando que se ejecute. También ./magentohay una secuencia de comandos para hacer php bin/magentoo llamar a la misma cosa dentro del contenedor de la ventana acoplable, si se usa la ventana acoplable, puede hacer la suya o señalarla, php bin/magentopero si está leyendo esto, debe saber de qué estoy hablando, si no, ejecute la pregunta por ayuda

CJ García
fuente
0

Poca adaptación para mi caso

#!/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"
Mmanza
fuente