WordPress Plugin Boilerplate + Gulp

TL;DR

  • get your copy of the WPPB and unzip it in your plugins folder
  • $ cd into/your/wppb/dir
  • $ git clone https://gitlab.com/alexanderwinstoncoleman/gulp-workflow-for-wordpress-plugin-boilerplate
  • $ npm install
  • $ gulp startUp
  • $ gulp watchCSS

I like working with the WordPress Plugin Boilerplate (WPPB). When I first started working with it I felt I was in over my head. I still sometimes question if I’m using it in the best way, but I think a lot of us question ourselves frequently. I still search quite a bit for “how to” use it. I was happy to find this GitHub repo with tutorials and documentation. It has some pointers on how and where to insert code for different tasks, like registering custom post types, getting templates for said CPT from within the plugin, and far more. Check it out!

WPPB is a quick method of getting a plugin off the ground. You can activate it, the CSS and JS for public and admin is enqueued for you, and you’re off to the races! Sort of…

I wanted my CSS (and eventually JS) to be minified, prefixed, and ready for production. That’s why I wrote this WordPress Plugin Boilerplate + Gulp rabbit hole! Now onto Node Package Manager territory!

In my development process I use NPM packages to help me with my code. Mostly linting/prefixing/ES6-ing stuff using Gulp or Webpack. A few other things if needed. The past couple of times I used WPPB I integrated my Gulp workflow. I didn’t use Webpack because I felt that it wasn’t the correct hammer for the nail I was using. All I really wanted to do was compile and minify my code on the fly, and not worry too much about browsers and prefixing and all that annoying stuff. I also wanted to continue working with CSS nesting (read more about the state of CSS nesting here) and few other things. So I thought I’d write a post about this – it’ll help me remember this stuff a little easier. Perhaps I’ll even connect with other folks who can help improve it by suggesting other tools (or better implementation of the currents ones) or by asking for help.

First off: a quick note

I use VS Code as my editor. As mentioned above, CSS linting was part of my process – using the NPM package Stylelint. It’s quite popular (1.3 MILLION weekly downloads!). However I found the VS Code + Stylelint had some issues. Pretty much just annoying stuff – I really noticed it while using the WP Rig theme though. Turns out a VS Code extension helped the issue: VS Code Stylelint.

Getting Started: Get WPPB

Head on over to https://wppb.me/ and fill in all the fields to get a zip of all the files. Download and unzip the zip into the plugins directory of your installation (hopefully your developing locally!).

FYI: Folder Structure

There are a few folder structures out there for development. I waffled a bit on this, and decided to stick with keeping the original WPPB structure and put src directories next to the compiled files. I may change this in the future, but it’s what I went with.

Please note: you don’t need to create anything. running gulp startUp will create the necessary folders and files.

How to get started!

  • get your copy of the WPPB and unzip it in your plugins folder
  • $ cd into/your/wppb/dir
  • $ git clone https://gitlab.com/alexanderwinstoncoleman/gulp-workflow-for-wordpress-plugin-boilerplate
  • $ npm install
  • $ gulp startUp
  • $ gulp watchCSS

Now you’re ready! Visit the admin/css/src or public/css/src to get started. Please note that this Gulp workflow includes using nested CSS, but not SASS! (I mean, you could change that very easily!).

Since we’ve fired up $ gulp watchCSS, Gulp will watch for any CSS changes and minify/compile them into the parent folder.

TODO:

  1. On startUp: copy file from parent to src folder, remove original file.
  2. Get JS linting/transpiling working.
  3. Get a production zip built and which will removed all src files, and create a zip that can be dropped into wp-content/plugins/.

handy links:

Helper: postcss-loader not minifying css

Helper: postcss-preset-env

Helper: mini css extract

Leave a Reply

Your email address will not be published. Required fields are marked *