Magento2: Re gerar arquivo css na pasta pub / static


51

Instalei o Magento 2 e configurei o modo de desenvolvedor, depois instalei um módulo que contém arquivos css e js. O módulo funciona bem e os arquivos css e js são renderizados a partir da pasta pub / static. Agora eu fiz alterações css no arquivo css do diretório de módulos e execute o comando

php bin/magento setup:static-content:deploy

mas o Magento não está fazendo minhas novas alterações nos arquivos pub / estáticos css, por isso estou obtendo o conteúdo antigo dos arquivos css. Alguém sabe como regenerar todo o arquivo css na pasta pub / static?


8
FYI: Magento 2 possui um modo de desenvolvedor, assim você não precisa implantar conteúdo estático o tempo todo. Eu perdi horas e horas no mês passado reimplantando conteúdo estático. Portanto, não seja como eu, e mudar para o modo de desenvolvedor (em sua máquina local seu servidor ao vivo deve estar em modo de produção.)
Nathan Merrill

por que regenerar com versão diferente ??? Eu tenho um problema com a versão do arquivo de implantação que não corresponde. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

3
Se o magento estiver no modo de desenvolvedor, ele criará links simbólicos para os arquivos estáticos, mas para que isso aconteça, é necessário ter um .htaccessarquivo na pub/staticpasta para que ele saiba como vincular os arquivos, se você excluiu a pasta pub / estática que .htaccessestá faltando agora
Vlad Patru

@NathanMerrill você está certo, mas a maioria dos desenvolvedores não lê a documentação e todas as respostas e ainda executa o comando static-content: deploy e o que é um pouco triste é que algumas das empresas com conta no Stackexchange fornecem respostas como essa , perda de tempo
Vlad Patru

Respostas:


69

Antes de excluir pub / static, faça um backup de pub / static / .htaccess e restaure-o novamente. caso contrário, todos os seus css e js mostrarão erro 404!

  1. Remova pub/static[Mantenha o backup do .htaccess e copie-o novamente]
    1. Retirar var/cache
    2. Retirar var/composer_home
    3. Retirar var/generation
    4. Retirar var/page_cache
    5. Retirar var/view_preprocessed
    6. corre php bin/magento setup:static-content:deploy

48
O M2 não torna as coisas muito amigáveis ​​ao desenvolvedor.
Matthew McLennan

10
@CarComp, nenhum arquivo deve ser excluído manualmente. O Magento deve cuidar disso. é muito chato
Claudiu Creanga

10
U deve ser novo para magento;)
CarComp

6
Eu acho que a remoção pub / static você também perde o interior arquivo .htaccess que é importante para evitar erros 404, é ok para excluir as subpastas da pub / estático, mas que .htaccess deve ser preservada
Elio Ermini

3
Eu sou novo no "magento". WAT? É a maneira oficial de atualizar o css?
Puchu

20

as respostas aqui não mencionam que você não deve excluir o .htaccess na pasta pub / static.

para excluir todos os arquivos, exceto os .htacces, digite o diretório pub / static e execute

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

então você pode correr

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

por que regenerar com versão diferente ??? Eu tenho um problema com a versão do arquivo de implantação que não corresponde. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

11
não funcionou como expectedd
Christophe Ferreboeuf

11

Acabei de excluir os arquivos css da pub/staticpasta e execute o comando:

php bin/magento setup:static-content:deploy

Ele irá gerar novamente o mesmo arquivo com as alterações mais recentes.


por que regenerar com versão diferente ??? Eu tenho um problema com a versão do arquivo de implantação que não corresponde. magento.stackexchange.com/questions/94502/…
Magento2 Devloper

9

Como a pergunta é para js and cssatualização no Magento 2 no modo de desenvolvedor .

  1. Atualizando o JS em seu módulo respeitado, antes de atualizar a página, o mesmo arquivo pub/static/frontend/namespace/theme/ ... module/js/...é excluído para excluí-lo, para que, após a atualização da página, o arquivo JS fresco gere na pasta pub.
  2. Atualizando o CSS em seu módulo respeitado, faça o pt 1.
  3. Atualizando menos arquivo

Tema de instalação no magento ...\dev\tools\grunt\configs\themes.js

Clone qualquer tema luma de exemplo de tema único e atribua um nome, suponha xyz

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

Na pasta raiz, altere o nome do arquivo: Gruntfile.js.sample para Gruntfile.js

Na pasta raiz, altere o nome do arquivo: package.json.sample para package.json

Precisa ter um grunhido na pasta do seu site para instalar via npm

Abrir prompt de comando com permissão de administrador

Vá para a pasta do site no CMD e pressione o comando grunt exec:themepela primeira vez após implantar o tema

Então, grunt less:theme sempre que fizermos alterações em menos

Se você estiver fazendo alterações frequentes com menos uso grunt watch, isso acerta automaticamentegrunt less:theme

Nota: Você pode receber um erro do Symlink, então vá para o arquivo .../app/etc/di.xmle comente ou remova o código (código abaixo) no seu local até o desenvolvimento terminar, não envie o código do arquivo chnaged para o servidor, ele é necessário apenas no local, se necessário.

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

7

Maneira simples 1

No Admin do Magento. Vá para System > Tools > Cache Managemente clique em Flush Static Files Cache .

Maneira simples 2

Se você acabou de alterar o arquivo css que já existente , o que você precisa fazer é simplesmente excluir o arquivo correspondente pub/static, então quando você atualizar a página, ele irá gerar o novo arquivo versão css. Funciona no modo desenvolvedor .


Aviso prévio

  1. Quando você cria um novo arquivo, em vez de modificar um arquivo existente, também pode ser necessário limpar o cache php bin/magento cache:flush,.

  2. O modo padrão e o modo de desenvolvedor não precisam implantar arquivos de exibição estáticos , porque os arquivos estáticos são gerados dinamicamente e não materializados. (Referência: Sobre os modos Magento )

  3. No modo de produção , você também pode precisar php bin/magento setup:static-content:deploye php bin/magento cache:flush, ainda não tento o modo de produção .


6

Ok, então com base no que li em várias outras postagens e minha experiência pessoal aqui é o processo de regenerar o CSS ou qualquer Conteúdo Estático:

php bin/magento setup:upgrade

Isso eliminará todos os arquivos de cache / geração / etc necessários sem excluir nada do que você realmente precisa.

php bin/magento setup:di:compile

Isso irá recompilar os arquivos. Por último:

php bin/magento setup:static-content:deploy

Após o último comando, tudo deve estar novo e atualizado, basta atualizar sua página.

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

1) Verifique se as permissões de arquivo e o proprietário: o grupo de usuários está definido corretamente antes de fazer isso. Talvez você precise falar sobre isso com o administrador do sistema.

2) Se o seu comando setup: upgrade falhar, ele poderá excluir os arquivos e não conseguir gravar os novos, como foi o caso devido às permissões do arquivo. Isso pode danificar seu site, apenas resolver as permissões e executar novamente o comando.

3) Não encontrei (até agora) uma maneira de recompilar apenas um tema ou arquivo específico (seria super útil se alguém encontrar uma maneira) sem escrever um script completamente personalizado

Se alguém souber de algo melhor, avise-me, porque 12 minutos de compilação de arquivos porque eu tive que fazer algumas alterações no CSS é um design extremamente ruim para os meus olhos.

--- Editar ---

O Magento 2 tem o Grunt vinculado e isso facilita a atualização de arquivos CSS / LESS infinitamente mais fácil se você reservar um tempo para configurá-lo. A maioria dos arquivos existe como arquivos .sample, basta remover a extensão .sample, configurar o arquivo themes.js na pasta / dev / tools / grunt / configs. Então, quando você precisar atualizar seus arquivos MENOS, basta executar menos um grunhido: - theme-- na linha de comando.

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


Parar de fornecer o php bin / setup magento: static-content: método de implantação, no modo de desenvolvedor magento tem links simbólicos
Vlad Pătru

Ah, e excluir manualmente as pastas, remover os arquivos .htaccess e outros não relacionados e forçá-lo a reconstruir é o melhor método ??? Adicionei um comentário sobre o uso do Grunt, porque simplesmente mover sua loja para o modo de desenvolvedor não instancia todos os links simbólicos e atualiza seu css na página recarregada.
Vallier

6

não se esqueça de executar os comandos grunt exec:theme, grunt less:themeonde themeestá o tema que você declarou no themes.jsarquivo da pasta config do grunt (tudo isso está no guia do desenvolvedor) e quando você tem magento no modo desenvolvedor, não deve executar o comando estático deploy, Magento2funciona comSymlinks


11
"quando você tem magento no modo de desenvolvedor, não deve executar o comando static deploy" <- Isso foi extremamente útil para mim. Obrigado! Acabei de excluir o conteúdo do diretório pub / static (exceto o .htaccess, é claro), atualizei a página e os symliks para meus arquivos css foram gerados automaticamente. Agora eu posso editá-los em tempo real. Quem disse que o Magento 2 não é amigável? Só preciso saber como usá-lo, eu acho.
precisa saber é o seguinte

11
Oi obrigado companheiro, grunhir menos: padrão resolveu o problema
Yusuf Ibrahim

6

Execute estes comandos na pasta raiz do 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/

Nunca pensou em correr um reindex no fundo 👍🏻
Sergei Filippov

Sou eu ou esses comandos do Magento 1 são uma resposta a uma pergunta do Magento 2?
Barry

Não há comandos Magento 1, eles são de Magento 2
Rafael Corrêa Gomes

6

Há uma observação importante a fazer sobre essa pergunta que a maioria das respostas não aponta especificamente. No seu caso (com a configuração que você está usando), o motivo pelo qual as alterações no CSS não são detectadas quando você gera novamente o CSS na pub/staticpasta é que não está removendo o conteúdo do var/view_preprocesseddiretor. Dentro deste diretório, há uma versão em cache do seu CSS que é puxada para a pub/staticpasta quando você executa o php bin/magento setup:static-content:deploycomando.

Portanto, quando você recompilar, o Magento procurará primeiro na var/view_preprocessedpasta o CSS em cache. Se esta pasta estiver vazia, ele procurará nos arquivos do tema e puxará esse CSS para compilação.

Essas configurações são configuráveis, portanto, existem várias maneiras de chegar ao seu destino que mudarão o caminho que você precisa seguir. Mas para a solução para sua configuração específica:

  1. Remova os arquivos da pub/staticpasta:rm -rf pub/static/*

  2. Remova os arquivos da var/view_preprocessedpasta:rm -rf var/view_preprocessed/*

  3. Recompile a pasta estática do pub: php bin/magento setup:static-content:deploy

  4. Limpar cache está ativado: php bin/magento cache:clean

  5. Atualize o navegador.


11
Seria bom se magento2 faria links simbólicos para os arquivos afetados no modo de desenvolvedor, então muda naqueles arquivos de módulo, onde visível na mosca
roman204

Sim, mas eu não entendi o quando e como, porque eu não trouxe isso à tona na resposta. Existem arquivos de configuração globais que podem definir isso no seu app/etc/di.xmlarquivo di.xml ( ). Mas tive resultados mistos durante o teste. Há um pouco mais aqui na segunda resposta: magento.stackexchange.com/questions/116605/…
circlesix


5
  1. Remova a estática do pub.
  2. pub/staticpermissão 777
  3. Limpar cache.
  4. Corre: php bin/magento setup:static-content:deploy

Você verá um novo css.

NOTA:

Dê permissão adequada para pastas e arquivos.

Eu espero que isso te ajude.


"Você verá um novo css." - Eu não fiz, mas obrigado
Barry

4

Você não poderia simplesmente liberar o cache estático no painel de administração e depois

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

1

Verifique se você está usando o modo de desenvolvedor.

Em seguida, execute o seguinte código:

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

Atualize a página do front-end. Estas etapas resolveram o meu problema.


bom, isso realmente me ajuda obrigado
Yoesoff

0

No entanto, você pode adicionar o sinalizador -fou --forceao comando setup.

Exemplo:

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

0

Vou largar minha gota de sabedoria aqui.

Eu uso um cache_fly.shscript bash que basicamente faz:

#!/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: Adicionei um eco para me mostrar quantas horas da minha vida perdi esperando a execução. Também ./magentoé um script para fazer php bin/magentoou chamar a mesma coisa dentro do contêiner do docker, se o docker for usado, você pode criar o seu ou apontar para ele, php bin/magentomas se estiver lendo isso, deve saber do que estou falando; caso contrário, execute perguntando para ajuda.


0

Pouca adaptação para o meu 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"
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.