Magento2: Re gerar arquivo css na pasta pub / static

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?

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]
   2. Retirar var/cache
   3. Retirar var/composer_home
   4. Retirar var/generation
   5. Retirar var/page_cache
   6. Retirar var/view_preprocessed
   7. corre php bin/magento setup:static-content:deploy

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/ 

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.

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>

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 .

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

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

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/

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.

Remover pasta que contém seu tema no
cache claro de pub / estático / front-end
Você pode usar o grunt para assistir a aplicar folhas de estilo. Leia aqui

1. Remova a estática do pub.
2. Dê 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ê não poderia simplesmente liberar o cache estático no painel de administração e depois

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

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.

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

Exemplo:

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

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.

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"