Como você evita o armazenamento em cache durante o desenvolvimento?

Existe uma maneira simples de impedir todo o armazenamento em cache ao testar a aparência das alterações no site? Eu uso o WP Super Cache. Posso excluir seu cache usando a opção fornecida, excluir o cache do meu navegador e, ainda assim, algumas alterações no CSS ou nos widgets não são atualizadas. Eu tento outras soluções alternativas, como alternar navegadores ou computadores, mas deve haver um fluxo de trabalho mais alinhado ao fluxo, para garantir que estou visualizando as alterações que fiz e não algum formato anterior armazenado em cache? Qual é a melhor solução para isso?

Adicione o filemtime()da sua folha de estilo como parâmetro de versão. Digamos que sua folha de estilo padrão esteja em ( css/default.csse não ). Quando registramos uma folha de estilo ( não ), podemos passar uma versão como quarto parâmetro. Essa será a hora da última modificação e, portanto, será alterada toda vez que alterarmos o arquivo.css/default.min.cssstyle.csswp_loadedinit

$min    = WP_DEBUG ? '': '.min';
$file   = "/css/default$min.css";
$url    = get_template_directory_uri() . $file;
$path   = get_template_directory() . $file;
$handle = get_stylesheet() . '-default';

// Overridden?
if ( is_child_theme() && is_readable( get_stylesheet_directory() . $file ) )
{
    $url  = get_stylesheet_directory_uri() . $file;
    $path = get_stylesheet_directory()     . $file;
}

$modified = filemtime( $path );

add_action( 'wp_loaded', function() use ( $handle, $url, $modified ) {
    wp_register_style( $handle, $url, [], $modified );
});

add_action( 'wp_enqueue_scripts', function() use ( $handle ) {
    wp_enqueue_style( $handle );
});

Se você estiver usando o Node.js e o Grunt, recomendo fortemente o Browsersync . Ele observará seus arquivos e os atualizará instantaneamente sempre que eles forem alterados. Ele também pode sincronizar a posição de rolagem, envios de formulários e muito mais em vários navegadores abertos. Muito legal.

Depois de procurar uma solução simples muitas vezes, decidi encontrar algo que funcionasse!

então ... depois de pensar nisso, encontrei uma ótima maneira de substituir o cache ao desenvolver novos sites ... (e é fácil).

O que precisamos é dizer ao wp que esta é uma nova versão CSS como esta ...

Antes das alterações:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css', array(), false, 'all' );

Após as alterações:

wp_enqueue_style( 'maincss', get_template_directory_uri() . '/css/style.css?v='.time(), array(), false, 'all' );

Isto é o que adicionamos:

?v='.time()

Explicação:
Basicamente, estamos adicionando um número de versão dinâmico ao arquivo css, o que força o navegador a carregar o novo css toda vez que o atualizamos.

Não se esqueça de removê-lo após o término do desenvolvimento, caso contrário, o armazenamento em cache não funcionará para esse arquivo e será carregado para os usuários que retornam repetidamente.

Essa técnica funciona para arquivos css & js - espero que ajude;)

Isso pode parecer muito simples, mas que tal desabilitar o cache até você terminar a parte de desenvolvimento do seu site? É mais do que simples ligar e desligar.

Sei que essa pergunta teve uma resposta aceita, mas acho que essa resposta ainda é muito complicada para o problema em questão e pode estar incorreta, dependendo do usuário (sem ofensas), então pensei em compartilhar como ignoro o cache quando faço meu dev (não apenas com o Wordpress).

A maioria dos navegadores modernos tem algo chamado modo de navegação anônima . Nesse modo, nada no seu computador é armazenado em cache; portanto, toda atualização é um novo download do servidor. No Internet Explorer, você pressiona Ctrl + Shift + P. No Firefox e Chrome, você pressiona Ctrl + Shift + N.

Se o seu navegador não tiver o modo de navegação anônima, normalmente você poderá forçar uma recarga forçada pressionando Ctrl + F5no IE ou Ctrl + Shift + Rno Firefox e Chrome.

Quanto à sua pergunta sobre os arquivos CSS (e essencialmente, todos os seus arquivos de ativos, como imagens e arquivos Javascript), eles não são armazenados em cache de forma alguma pelo WP Super Cache. Suas configurações e / ou uso deste plug-in não afetam a forma como esses arquivos são veiculados. O que está armazenando em cache esses arquivos é o seu navegador , e é por isso que você faz uma recarga pesada.

O que o plug-in faz é avaliar como o Wordpress constrói seus arquivos HTML (via PHP) e armazena uma cópia, para que da próxima vez que alguém solicite a mesma publicação, página ou qualquer outra coisa, ele sirva a cópia e não precise reavaliar o HTML gerado pelo PHP novamente e, portanto, economizar tempo de computação, carregando suas páginas muito mais rapidamente. (Espero que esteja claro.)

O problema é que, se você digitar um carimbo de data e hora no URL dos seus arquivos CSS por meio de uma função PHP, isso é uma avaliação do PHP para HTML e será armazenada em cache pelo WP Super Cache. Cada solicitação para a mesma postagem terá o mesmo registro de data e hora, pois os usuários recebem uma cópia da avaliação original do registro de data e hora. (Corrija-me se eu estiver errado.)

A maneira correta de caching de desvio WP Super Cache é para definir a opção Don't cache for known userspara truea página de configuração do plugin.

Finalmente (e essa é uma preferência pessoal, como sou um defensor real da codificação), recorrer ao uso de recarregamentos forçados no modo anônimo ou forçado não exigirá que você adicione marcações desnecessárias em suas páginas HTML. É claro que adicionar um carimbo de data / hora adiciona apenas 13 bytes por arquivo estático por solicitação, mas, como eu disse, sou um defensor desse tipo de coisa. Ainda são 13 bytes desnecessários.

Puxa, muitas maneiras de responder a este! Em primeiro lugar, você perguntou sobre duas coisas diferentes: WP Super Cache e arquivos CSS. Eles são armazenados em cache de maneira diferente, em lugares diferentes; portanto, é importante reconhecer onde está o seu problema.

Se o WP Super Cache, você pode definir a constante DONOTCACHEPAGEem seu functions.php durante o desenvolvimento para impedir que o WP Super Cache armazene em cache qualquer coisa. Não se esqueça de remover isso no lançamento!

define('DONOTCACHEPAGE', true);

Cada site também possui uma chave exclusiva para anexar ao URL para carregar uma versão nova da página, que você pode encontrar na guia "Avançado", acredito.

Dividindo-o em uma solução ainda melhor, considere configurar um ambiente de desenvolvimento e um ambiente de produção, nos quais seu ambiente de desenvolvimento não tenha o WP Super Cache ativado (novamente, assumindo que esse é o seu problema).

Se o seu problema for com arquivos CSS / JS, consulte a resposta toscho e o comentário subsequente por m0r7if3r acima.

O HyperCache desativa o armazenamento em cache quando você está conectado como administrador. Não tenho certeza se o WP Super Cache tem a mesma funcionalidade.

Se você estiver usando o Chrome (o que eu sugiro), abra o Inspector, clique no ícone de configurações no canto inferior direito e, em "Rede", selecione "Desativar cache".

Como dito para o super cache wp, mas para o cache geral do WP, wp-config.php mude para:

define( 'WP_CACHE', false );

Referência: codex.wordpress.org

Você pode usar este snippet https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Ele irá gerar uma nova versão do seu tema ativo css e js toda vez que você carregar a página