Trying to modernize my development workflow. I sometimes develop my themes in parallel to front-end work, just to make the dev process faster.
Grunt is awesome for that. It compiles my Sass, JS and SVG straight to my theme folder, so no more manual concatenating JS or minifying SVG. Using Grunt also makes it simpler to hand a project over to another developer. They have to run npm install and everything just works.
Please note that I’m not using a local server currently, as I am still manually uploading edited theme files via FTP to the dev server.
So, here we go. My folder structure looks like this:
/* All raw sass files */
/* All raw js files */
/* All raw svg files */
/* All compiled grunt output files */
/* All raw theme files */
I could probably toss all the raw css, js and svg folders to an /assets/ folder, but right now it makes sense to me not to do that.
I normally have extra assets that are not touched by Grunt, like fonts, in a subfolder in /inc/.
First off is my CSS logic. My SCSS usually lives as partials, these are @imported to my global.scss file. After compiling Sass, Autoprefixer takes over. I have no options set here, since browser support varies greatly per project.
Side note: every time one of my coworkers messes with some experimental css features or prefixing properties in general and they still have issues with getting stuff working, my first question is: “Are you using Autoprefixer?”
Next up is my JS logic. Most of the project we take on require quite a bit of jQuery use, so that’s included by default. I’m debating myself whether to use the jQuery file that comes with WordPress or control it myself and include it in my global.js. Right now I tend to use my own, so there’s that.
So: my concat task takes all the files in my /js/ folder and concatenates them to my theme folder. It makes sure that jQuery is first and that my scripts.js is last in the concatenated file, with everything else (usually various jQuery plugins) in between.
Then there’s my SVG icon system compilation logic. I moved away from icon fonts a while back, and currently only support them on old projects. An SVG icon system is a lot better. Icon fonts suffered front cross-browser font rendering issues, but SVG works and looks the same everywhere. That means, IE9+.
I save my SVG files from Illustrator directly to my /svg/ folder. Then svgmin takes control. It removes unnnecessary attributes and fill colors, so I can control the fills through CSS. The minified SVG files are placed in /svg/min/. Then I build an SVG sprite with svgstore and put it in my theme folder, ready to use. There are some necessary attributes that the <svg> element in the sprite gets, in order to get <use> with external resource working.
Now I can use the icons in my templates like this: