Use grunt with an existing wordpress instance

Question

I am trying to figure out how to minimize and combine js / css code considering this situation:

• I bought a theme, did not develop it
• I use several plugins. They are useful, but they output very ugly code (lots of built-in CSS and js, mostly development code with full comments).

I'm pretty new to grunt, I used it in the past with custom web applications, but never with wordpress, I wonder if it can help when you have a lot of PHP scripts / plugins that introduce their ugly code.

So my question is: is there a way to get grunt to work with wordpress so that the production code serves in the above case? If so, how?

Answer 1

You can use the plugin to remove your resource or manually remove it from the queue, and then try to combine and minimize them.

This article can give you what you are looking for http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/

Answer 2

I am afraid that there is no way to achieve what you are looking for without modifying these plugins.

Grunt is just a runner for JavaScript tasks - it has no sense in a web application, whether it be WordPress or something normal. You give Grunt some input, and you tell him what to do with this input, and he does it. Therefore, in order to use Grunt to minimize and concatenate all the JavaScript and CSS on your site, you must extract them from the plugins and place them in the appropriate file structure.

Generally speaking, when a plugin insists on a heap of JavaScript and / or CSS, this is not a good plugin. For example, my team uses gulp.js (similar to Grunt) for a large amount of development in the WordPress interface (concatenation, minimization, fingerprints, automatic prefixes, etc.), and we discuss in detail which plugins we are (if any are) - one of the reasons is exactly what we are talking about.

Answer 3

Your plan looks a little dirty. In the best case scenario, let's say you set up and use the simple Grunt task to minimize all of your CSS and JS that your Wordpress instance uses.

This means that you need to dig the code, find where each of your plugins extracts styles or scripts, disables them and reduces their use with Grunt. After that, you should pick up the last thumbnail file and re-enter it into your Wordpress instance.

Besides having to do a lot of custom coding, updating your plugins will give you a lot of pain.

To adhere to a scalable and convenient plan, I suggest using the BWP minify plugin , which takes care of your styles and scripts, it supports CDN.

Then you can use Grunt as a mechanism for checking the quality of the code. Uncss is a great tool to help you find unused styles. Grunt-usemin is a great solution.

Finally, since I see that you are ready to move on to the command line tools, I would really like to take a look at WP-CLI it is a wonderful command line interface for Wordpress.

Answer 4

If you are willing to spend the time needed to split your JS into modules, then grunt-browserify may work well for you for a long time. However, as already mentioned, this will require extracting the appropriate code from your plugin files.

To minimize CSS, grunt-contrib-cssmin is worth a look. I also like grunt-text-replace to change relative paths in CSS before testing or deploying (which can get worse if you don't develop Direct-to-Wordpress).

Answer 5

To style the FoundationPress-child theme, it uses grunt and several other useful tools and libraries. I use it as a base for a WP site that I made for my client. This is a good starting point as well as VCCW.

https://github.com/thetrickster/FoundationPress-child

https://github.com/vccw-team/vccw