¿Cómo evitas el almacenamiento en caché durante el desarrollo?

¿Hay alguna manera simple de evitar todo el almacenamiento en caché al probar la aparición de cambios en el sitio? Yo uso WP Super Cache. Puedo eliminar su caché usando la opción provista, eliminar el caché de mi navegador y aún algunos cambios en css o widgets no se actualizan. Intento otras soluciones como cambiar de navegador o computadora, pero debe haber un flujo de trabajo más ágil donde pueda asegurarme de que estoy viendo los cambios que hice y no algún formato anterior en caché. ¿Cuál es la mejor solución para esto?

Agregue el filemtime()de su hoja de estilo como parámetro de versión. Digamos que su hoja de estilo predeterminada está en css/default.cssy css/default.min.css( nostyle.css ). Cuando registramos una hoja de estilo en wp_loaded( noinit ), podemos pasar una versión como cuarto parámetro. Esa será la última hora modificada y, por lo tanto, cambiará cada vez que cambiemos el archivo.

$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 );
});

Si está utilizando Node.js y Grunt, le recomiendo Browsersync . Observará sus archivos y los actualizará instantáneamente cada vez que cambien. También puede sincronizar la posición de desplazamiento, envío de formularios y más en múltiples navegadores abiertos. Muy genial.

¡Después de buscar una solución simple muchas veces, decidí encontrar algo que funcionara!

así que ... después de pensarlo, encontré una excelente manera de anular el almacenamiento en caché al desarrollar nuevos sitios web ... (y es fácil).

Lo que necesitamos es decirle a wp que esta es una nueva versión de CSS como esta ...

Antes de los cambios:

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

Después de los cambios:

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

Esto es lo que agregamos:

?v='.time()

Explicación:
Básicamente estamos agregando un número de versión dinámica al archivo CSS que obliga al navegador a cargar el nuevo CSS cada vez que lo actualizamos.

No olvide eliminarlo después de que haya terminado de desarrollar, de lo contrario, el almacenamiento en caché no funcionará para este archivo y se cargaría una y otra vez para los usuarios que regresan.

Esta técnica funciona para archivos css & js; espero que esto ayude;)

Esto puede parecer demasiado simple, pero ¿qué tal simplemente deshabilitar el almacenamiento en caché hasta que haya terminado con la parte de desarrollo de su sitio? Es más que simple encender y apagar.

Sé que a esta pregunta se le ha aceptado una respuesta, pero creo que esa respuesta sigue siendo demasiado complicada para el problema en cuestión, y en realidad puede ser incorrecta dependiendo del usuario (sin ofender), así que pensé que aún compartiría cómo evito el almacenamiento en caché cuando hago mi desarrollo (no solo con Wordpress).

La mayoría de los navegadores modernos tienen algo llamado modo incógnito . En este modo, nada en su computadora se almacena en caché, por lo que cada actualización es una descarga de pizarra nueva del servidor. En Internet Explorer presionas Ctrl + Shift + P. En Firefox y Chrome, presionas Ctrl + Shift + N.

Si su navegador no tiene modo de incógnito, normalmente puede forzar una recarga dura presionando Ctrl + F5para IE, o Ctrl + Shift + Ren Firefox y Chrome.

En cuanto a su pregunta con respecto a los archivos CSS (y esencialmente, todos sus archivos de activos, como imágenes y archivos Javascript), WP Super Cache no los almacena de ninguna manera. Su configuración y / o uso de este complemento no afecta la forma en que se sirven esos archivos. Lo que almacena en caché esos archivos es su navegador , y esa es la razón por la que realiza una recarga dura.

Lo que hace el complemento es evaluar cómo Wordpress construye sus archivos HTML (a través de PHP) y almacena una copia, de modo que la próxima vez que alguien solicite la misma publicación, página o lo que sea, sirva la copia, y no tendrá que vuelva a evaluar el HTML generado por PHP nuevamente y, por lo tanto, ahorre algo de tiempo de cómputo, cargando sus páginas mucho más rápido. (Espero que esté claro).

El problema con eso es que, si está marcando una marca de tiempo en la URL de sus archivos CSS a través de una función PHP, esa es una evaluación PHP a HTML, y eso será almacenado en caché por WP Super Cache. Cada solicitud a la misma publicación tendrá la misma marca de tiempo porque los usuarios reciben una copia de la evaluación de marca de tiempo original. (Corrígeme si me equivoco.)

La forma correcta de almacenamiento en caché de Super GT caché de derivación es para establecer la opción Don't cache for known usersde trueen las páginas de configuración del plugin.

Finalmente (y esta es una preferencia personal, ya que soy muy exigente en lo que respecta a la codificación), recurrir al uso de incógnitas o recargas forzadas no requerirá que agregue marcas innecesarias en sus páginas HTML. Por supuesto, agregar una marca de tiempo solo agrega alrededor de 13 bytes por archivo estático por solicitud, pero bueno, como dije, soy fanático de este tipo de cosas. Todavía son 13 bytes innecesarios.

Gosh, muchas maneras de responder a esta! En primer lugar, preguntaste sobre dos cosas diferentes: WP Super Cache y archivos CSS. Estos se almacenan en caché de manera diferente, en diferentes lugares, por lo que es importante reconocer dónde está su problema.

Si WP Super Cache, puede definir la constante DONOTCACHEPAGEen sus functions.php durante el desarrollo para evitar que WP Super Cache almacene en caché cualquier cosa. ¡No olvides eliminar esto en el lanzamiento!

define('DONOTCACHEPAGE', true);

Cada sitio también tiene una clave única para agregar a la URL para cargar una versión nueva de la página, que puedes encontrar en la pestaña "Avanzado", creo.

Desglosándolo en una solución aún mejor, debería considerar configurar un entorno de desarrollo y un entorno de producción, donde su entorno de desarrollo no tenga WP Super Cache habilitado (nuevamente, suponiendo que ese sea su problema).

Si su problema es con archivos CSS / JS, vea la respuesta de toscho y el comentario posterior de m0r7if3r arriba.

HyperCache deshabilita el almacenamiento en caché cuando inicia sesión como administrador. No estoy seguro de si WP Super Cache tiene la misma funcionalidad.

Si está utilizando Chrome (lo cual le recomiendo), abra Inspector, haga clic en el icono de configuración en la esquina inferior derecha y en "Red" seleccione "Desactivar caché".

Como se dijo para wp super cache, pero para el almacenamiento en caché general de WP en wp-config.php Change to this:

define( 'WP_CACHE', false );

Referencia: codex.wordpress.org

Puede usar este fragmento https://gist.github.com/jhayiwg/92bae4330aeb738a98022d7ab63ce9b1

Generará una nueva versión de su tema activo css y js cada vez que cargue la página