I’m trying to figure out how to minify & combine js/css code given this situation:
- I purchased a theme, didn’t develop it
- I’m using several plugins. They are useful, but they output some very ugly code (lot of inline CSS & js, mostly development code with full comments)
I’m fairly new to grunt, I’ve used it in the past with custom web apps, but never with wordpress, I wonder if it can help when you have lots of PHP scripts / pluging which injects their ugly code.
So my question is: is there a way to make grunt work with wordpress so that production code is served in the case above? If so, how?
I’m afraid there’s no way to achieve what you’re looking for without modifying those plugins.
Grunt is just a JavaScript task runner – it has no sense of a web application, be it WordPress or something custom. You give Grunt some input, and you tell it what to do with that input, and it does it. Therefore, in order to use Grunt to minify and concatenate all of the JavaScript and CSS on your site, you have to extract it from the plugins and place it into an appropriate file structure.
Generally speaking, when a plugin insists on inlining a bunch of JavaScript and/or CSS, it’s not a very good plugin. For example, my team uses gulp.js (similar to Grunt) for a lot of WordPress front-end development (concatenation, minification, fingerprinting, automatic prefixes, and so on), and we’re very particular about which plugins we use (if any at all) – one of the reasons being exactly what your question is about.
Your plan seems a little messy.
In the best case scenario, let’s assume that you have configured and used a simple Grunt task in order to minify all your CSS and JS your WordPress instance uses.
That means that you have to dig through your code, find where each of your plugins fetches styles or scripts , cut them off and minify ’em using Grunt. Afterwards you should take up the final minified file and inject it into your WordPress instance again.
Besides the fact that you will have to do a lot of custom coding, updating your plugins will give you lots of pain.
In order to stick to a scalable and easy to follow plan I suggest using BWP minify plugin which will take care of your styles and scripts, it provides CDN support.
You may then use Grunt as a code quality check mechanism. Uncss is a great tool helping you find unused styles. Grunt-usemin is an excellent solution too.
At last, as I see that you are willing to move to command line tools I would highly suggest taking a look at WP-CLI it’s a wonderful command line interface for WordPress.
You can either use a plugin to dequeue your assets or manually dequeue, then tell grunt to concatenate and minify them.
This article may give you what you are looking for http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/
If you’re willing to spend the time necessary to separate your JS into modules, then grunt-browserify might work well for you in the long run. However, as mentioned already, this would require extracting the relevant code from your plugin files.
For CSS minification, grunt-contrib-cssmin would be worth a look. I also like grunt-text-replace for changing relative paths in CSS before testing or deployment (which can be aggravating if you’re not developing direct-to-Wordpress).
Checkout the FoundationPress-child theme, it uses grunt and a handful of other nice tools and libraries. I’m using it as a base for a WP site I made for a client of mine. It’s a good starting point, along with VCCW.
https://github.com/thetrickster/FoundationPress-child
https://github.com/vccw-team/vccw