When is the proper time to minify css and js with git workflow?

Probably the simplest solution is to have the WordPress environment tell your plugin what files to load. On your development install of WP, you should set the constants WP_DEBUG and SCRIPT_DEBUG to true. Then in your functions.php or main file of the plugin, you can do something like this for the image path:

if ( defined( 'WP_DEBUG' ) && true === WP_DEBUG ) {
    define( 'IMG_PATH', '/path/to/dev/images' );
} else {
    define( 'IMG_PATH', '/path/to/S3/bucket' ); 
}

That will allow you to set your image paths once and have the code load the correct one depending on the environment:

<img src="https://wordpress.stackexchange.com/questions/213764/<?php echo IMG_PATH;?>/header.jpg" />

You can do something similar to this when enqueuing js/css:

//define the base path to our assets
$basepath = plugin_dir_url( __FILE__ );

//setup the production names for the files
$js_file="scripts.min.js";
$css_file="styles-compressed.css";

//check for WP_DEBUG constant status
if( defined( 'WP_DEBUG' ) && WP_DEBUG ) {

    //check for SCRIPT_DEBUG constant status
    if( defined( 'SCRIPT_DEBUG' ) && SCRIPT_DEBUG ) {
        $js_file="scripts.js";
        $css_file="styles-development.css";
    }
}

//load the files
wp_enqueue_script( 'plugin_scripts', $basepath . '/js/' . $js_file  );
wp_enqueue_style( 'plugin_styles', $basepath . '/css/' . $css_file  );

Here is some documentation on debugging in WordPress

Hope this helps!

Related Posts: