script debug

Uso de la constante SCRIPT_DEBUG en tus plugins y temas

A raíz del artículo anterior sobre cómo desarrollar en WordPress en diferentes entornos, vi que podía salir otro sobre cómo tener en cuenta la constante SCRIPT_DEBUG cuando estamos desarrollando un plugin o un tema.

Como su propio nombre indica, esta constante se puede utilizar para hacer una mejor depuración de código CSS y sobre todo JS. Puede establecerse con dos valores (true o false), y en función del valor que tenga, cargará la versión de desarrollo de tus archivos CSS y JS.

¿Pero qué es la versión de desarrollo? Normalmente, cuando desarrollas un plugin y/o tema y tienes que encolar archivos CSS y/o JS, trabajas con un archivo tipo styles.css ó scripts.js. Estos son los archivos sobre los que «trabajas», y normalmente después se utiliza algo tipo grunt, gulp o webpack para tareas como minify, uglify, concat, etc… y terminan generando archivos tipo styles.min.css y scripts.min.js.

Hosting WordPress SSD Raiola Networks

Esto se hace sobretodo por temas de rendimiento y optimización. Los archivos resultantes eliminan espacios y ofuscan el código para que el archivo físico ocupe menos y por lo tanto sea más rápida su descarga y ejecución.

Sobretodo en el caso de los archivos JS, la «uglificación» hace que la legilibilidad del código sea más complicada, y si ocurre algún error, la depuración del código es más difícil.

Para esto está pensada la constante SCRIPT_DEBUG, para en función de su valor cargar los ficheros de desarrollo o los finales. Esto lo conseguimos fácilmente con un condicional:

<?php

$assets_path = get_template_directory_uri() . "/assets/";
$suffix = SCRIPT_DEBUG ? '' : '.min';

wp_enqueue_style('your-css-handle', "{$assets_path}/css/styles{$suffix}.css", [], null, 'all');
wp_enqueue_script('your-js-handle', "{$assets_path}/js/scripts{$suffix}.js", [], null, true);

Como ves, es muy sencillo implementarlo y si defines esta constante a true en el archivo wp-config.php en entornos locales y/o de desarrollo, te será más sencillo identificar posibles problemas y/o conflictos.

Su valor por defecto es false, por lo tanto cargará la versión minimizada y optimizada.

¿Te ha resultado útil esta información? 🍺

Si este post te ha resuelto un problema, invítame a un café o a una cerveza. Con este pequeño gesto me animas a seguir escribiendo.

Comentarios

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *:

  • El fin del tratamiento es únicamente la moderación de comentarios para evitar spam
  • La legitimación es tu consentimiento al comentar
  • No se comunicará ningún dato a terceros salvo por obligación legal
  • Tienes derecho al acceso, rectificación y eliminación de los comentarios