Minimize and Uglify WordPress Plugin Files

Question

Intro

When developing a gulp.js project, it is typical to have the following directory structure

PROJECT_NAME
    |
    ---------- dist <------------ contains library to be released
    |
    ---------- src <------------- contains all source code file

And the coding flow is

1. Create source files in the src directory
2. Once the files in src work as designed, the project is "uglified" and "minimized", then copied to the dist directory.
3. Once the dist directory has the final project, it is released.

So, the released version of the library is taken from the dist directory.

Setup for WordPress

Now, onto WordPress. I typically set my development environment as follows

WORDPRESS_ROOT_DIRECTORY
    |
  wp-content
    |
  plugins
    |
  my_plugin
    |
    -------- css  <---------- contains all CSS files
    |
    -------- inc  <---------- contains all PHP files
    |
    -------- js   <---------- contains all JavaScript files
    |
    -------- vendors <------- contains all libraries from other vendors
    |
    -------- my_plugin.php <---- this is the initial plugin file

This setup for WordPress would be OK and I have been developing plugins for it without a problem. I would develop, test, and then release.

The Issue

In my current WordPress project, I am developing a plugin that would require I minimize and uglify every file in the directory (the reasons for that are long, and I am not going into the business cases; it is a requirement). Typically I would like to create the following directory structure.

WORDPRESS_ROOT_DIRECTORY
    |
  wp-content
    |
  plugins
    |
  my_plugin
    |
    -------- dist <------ contains all minimized and uglified files
    |
    -------- src
              |
              -------- css  <---------- contains all CSS files
              |
              -------- inc  <---------- contains all PHP files
              |
              -------- js   <---------- contains all JavaScript files
              |
              -------- vendors <------- contains all libraries from other vendors
              |
              -------- my_plugin.php <---- this is the initial plugin file

Then, the ideal flow of development would be

1. Develop in the src directory
2. Once satified, minimize/uglify all PHP, CSS, and JS files into dist
3. Release the plugin from the dist directory

I have the following problems

1. I do not know if I can make such setup work. The problem is I will have functions that have the same name (referenced from my_plugin.php located in src and the minimized 'my_plugin.php' located in dist), and this would cause a WordPress function name conflict error.

2. Can I place my root plugin file, my_plugin.php, in a sub/sub directory?

3. I am not sure what tools I can use to take my files from src and convert them to dist while minimizing/uglifying them. I could use gulp.js to do that for my JS and CSS files, but I am not sure about PHP files. I need one tool that does that for all files.

If I am unable to create the structure above. How can I minimize/uglify ALL my files for my plugin before releasing the plugin? (And by ALL files, I mean PHP, CSS, and JS).

Thanks.

Answer 1

The simplest solution is to keep your source in the root of the plugin folder (i.e. your typical WordPress setup listed above). Your build script should write its output to a dist folder at the root of the plugin.

This prevents any possible WordPress conflicts; PHP and WordPress won't parse a file unless it is referenced with an include, require or otherwise in your code. So my_plugin.php in the root of the plugin and in the dist folder won't conflict at all.