One way to optimize bytes downloaded from your Web site is to minimize the CSS and JavaScript code required to display the pages. But if you like to tinker with those files, you don't want to work with the minified code because it strips out helpful comments and formatting.
CSS and JS preprocessors like SASS and CoffeeScript, to name just two, let you work with commented code but impose a metalanguage of their own and may be overkill for simpler sites or coders who prefer to work directly with CSS and JS.
Can you have your cake and eat it too? With Keyboard Maestro, you can.
THE PALETTE
This palette, active in text editors, allows you to open your production files, unminify them for editing and testing and then minify them again for production.
It relies primarily on just two commands: Minify After Backup and Unminify. A Preferences option lets you configure the palette for your environment. And a Backup option can verify your installation without risk.
Installation does require two Perl modules and two included Perl scripts.
The ReadMe.txt file and the Help option in Preferences have all the details.
WORKING WITH MINIFIED FILES
Apart from creating the unminified directories, there's no initialization necessary.
Just open your unminified file and Minify it to create production minified files with unminified backups.
Subsequently you can just work with the production file, opening the minifyied file and unminifying it for editing.
You can test your changes by running the unminified code and, when you're happy with it, minify it for production.
You never need to open an unminified backup file.
If you change your unminifieds subfolder, move any existing unminified files to the new subfolder to make them available to the Unminify command.
IN ACTION
The animation below shows the palette in action, using three of the four options.
The first segment shows the Preferences form with correctly formatted data in the fields. The second field is incorrectly edited, showing a red outline when the mistake is made and a bubble explaining the error with the form is submitted. It is then corrected and passes validation on submit.
The original unminified form, which has already been open, is then minified. YOu can't, in this animation, see the notification, though.
And then the minified text is uniminified.
KM CONCEPTS ILLUSTRATED
A number of Keyboard Maestro principles are used in this palette. Among them:
-
Building a filename path from a variable and a window title
-
Reading a trigger value to determine whether to run a macro as a function
-
Executing external AppleScript and Perl scripts
-
Passing a Keyboard Maestro variable to an external script
-
Passing an AppleScript variable back to Keyboard Maestro
-
If/Then/Else program flow
-
Custom HTML Form for preferences
-
HTML5 forms validation
In addition, there is some CSS code for drawing attractive buttons.
TESTING
I've been using this palette for several weeks. What's new in this distribution is the Preferences form to adapt the palette to other environments. The various options have been tested on a clean system.
But I'm happy to promptly address any concerns you may have.
Minify 10a.zip (16.5 KB)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Moderator Edit: See below for an update to Ver 2:
Version 2.0a changes
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~