Update build process to minify .js to .min versions

bobbingwide commented 4 years ago

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 bobbingwide/oik-i18n/issues/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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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
+ uglify-js@3.10.3
added 1 package from 1 contributor in 0.526s

bobbingwide commented 4 years ago

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 commented 4 years ago

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.

bobbingwide / oik-zip