1

New to web development, and have been utilizing a git repository for my wordpress website. I maybe over thinking this but here goes...

Currently, my workflow is as follows:

  1. Make changes locally and commit to dev branch
  2. Create release tags for appropriate site versions
  3. Deploy tag on staging, then to production.

When working on my local machine, URLs to images are on the local box. When I am happy with a release, I upload these images (compressed, resized) to an an S3 bucket, but this also involves going back and updating their src in any code.

There are lots of .css files, for my theme, and all the installed plugins. I was thinking about using Grunt/Gulp to minify all of this, along with concatenation. Then, store these files to an S3 bucket, similar to the images.

After minification, wouldn't I have to update all the references in the plugin/other PHP files to include the "min" version of it?

What are the benefits (if any), of minifying before deployment vs. using a plugin to do it, after deployment?

2
  • I have never used GIT but here are my thoughts: it's recommended to combine all your .js to one file and .css to other file which reduces requests from what ever amount you have to only few and can sometimes cut CSS and JS loading time in half or even more. Also, I would never minify and change .min in codes before project relase or final testing because it's very annoying to change everything related back if you need to change something in code (unless you have exact same unminified copy which needs to be in sync with .min every time you change it).
    – N00b
    Jan 5 '16 at 20:51
  • minify as part of your process and before deployment - wordpress.stackexchange.com/a/213096/84219
    – jgraup
    Jan 5 '16 at 21:17
0

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="<?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!

1
  • The use of SCRIPT_DEBUG is brilliant. Jan 6 '16 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.