Update build process to minify .js to .min versions

[bobbingwide]

• WordPress 5.5 started the process of migrating from jQuery v1.12.x to v3.5.1
• I've had to change a number of jQuery files.
• Some of these were shipped with a minified version. Identified by .min or .pack within the file name.
• The minified versions are those that we'd expect to use in production.
• The source files are for development, and should really only be enqueued when SCRIPT_DEBUG is true.
• I need to update the minified files as well as the source files.
• Additionally, there are some .css files that may need updating and re-minifying.

Requirements

• A semi-automated process to produce minified versions of source .js and .css files
• A configuration file to indicate which files to process.
• Exclude block editor files built using npm.

Current solution

7 years ago, I wrote a minify.bat file for my oik plugin.
This used yuicompressor v2.4.7, which requires Java.

e.g. to create the oik.min.css file from oik.css

java -jar C:\Users\herb\yuicompressor-2.4.7\build\yuicompressor-2.4.7.jar -v -o oik.min.css oik.css

Initial solution - resurrect yuicompressor

The initial solution would be to add logic to oik-zip to run the yuicompressor for any .js or .css file that needs a .pack or .min version.

Nope. That was no good.

Alternative solution - uglifyjs

This looks better.

• But I won't update oik-zip yet.
• Just copy minify.bat to uglify.bat and use it to uglify the .js files that need it.
• No longer use .pack files.

Longer term solution

Later I can find a way of incorporating the minifying logic into the npm build steps.

• For plugins which deliver blocks I'll be using npm to build the blocks and run internationalization and localization routines.
  See Update to support makepot logic run against JavaScript files oik-i18n#6
• But I'll still use oik-zip for other functionality.
• For other plugins, which don't deliver blocks, I'll continue to use oik-zip.

References

YUI Compressor
WordPress code build tools
WordPress TRAC #43731
Grunt
Gulp minify
Webpack MiniCssExtractPlugin
Minifying JavaScript with PhpStorm

[bobbingwide]

Initial solution - resurrect yuicompressor

The first stage of this, to attempt to complete the changes for bobbingwide/oik-nivo-slider#11, was to update the minify.bat file to use the latest yuicompressor. (v2.4.8 ).

It wasn't particularly successful. I concluded it would be better to look at what other plugins are doing.

[bobbingwide]

For plugins which deliver blocks I'll be using npm...

I've already linked a number of repositories to the Peaceful coexistence project because they included some JavaScript source.

• How many of them currently deliver blocks?
• How many are likely to deliver blocks in the future?
• What build process do they use: webpack or wp-scripts ?
• Should I be using an npm webpack build process from the outset?

Perhaps this table will help answer the questions

Plugin	Blocks now?	Future?	Pack/min?	Build process	Notes
oik	n	m	both	webpack
oik-ajax	0	0	-	-
oik-blocks	n+	m+	-	webpack
oik-bob-bing-wide	6	6	-	webpack
oik-css	2	2	-	webpack	-
oik-external-link-warning	0	0	n/a	-	See below
oik-magnetic-poetry	1	1	-	webpack
oik-nivo-slider	0	1	pack	webpack	see oik-blocks
oik-popup	0	1	-	wp-scripts
oik-squeeze	1	1	-	wp-scripts
oik-testimonials	0	1	-	-	Uses shortcodes/oik-jquery.php
uk-tides	1	1	-	webpack
sb-breadcrumbs-block	1	1	-	wp-scripts
sb-children-block	1	1	-	wp-scripts
sb-parent-block	1	1	-	wp-scripts

oik-external-link-warning

Depends on class-oik-jquery to enqueue jquery-ui-tooltip .js and .css ?

[bobbingwide]

oik-external-link-warning depends on class-oik-jquery

I’ll have to complete the transfer to using the class-oik-jquery library at some time. Is now a good time?

[bobbingwide]

Minifying JavaScript with PhpStorm

In the PhPStorm documentation they suggest using webpack or uglify-js

Since there are only a few files, and they're all quite small, I'm going to try configuring uglify-js first.

C:\apache\htdocs\wordpress>npm install --g uglify-js
C:\Users\herb\AppData\Roaming\npm\uglifyjs -> 
C:\Users\herb\AppData\Roaming\npm\node_modules\uglify-js\bin\uglifyjs
+ [email protected]
added 1 package from 1 contributor in 0.526s

[bobbingwide]

It wasn’t at all obvious that the UglifyJS method in PhpStorm worked. I copied/cobbled minified.bat to uglify.bat and tried it on a couple of files. This worked. Then I noticed that there was a .min.min.js file created for each min.js file modified outside of PhPStorm.

I believe this was because of a checkbox that caused PhpStorm to detect external file changes.
I have no idea how to configure the Watcher in PhpStorm so that it only runs for selected files.

Some time in the future I’m going to look at defining Multiple Entry Points with webpack.

But first I'll just edit uglify.bat to minimise the .js files that need it; for all the plugins that deliver and use jQuery files.

[bobbingwide]

Alternative solution - uglifyjs

The new solution for building .min.js versions of the files delivered by oik, oik-nivo-slider and list of other plugins tbc
is to use uglifyjs in a new routine called uglify.bat

• This will only be run against .js files.
• For the time being, we won't minify CSS.