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.
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.
Puede que también te interese
