General Introduction to PostCSS with Gulp
Unless you’ve been living under a rock, you’ve probably already heard about PostCSS. To say its “popular” would be quite an understatement. Since its introduction in the late 2013, a large number of developers have adopted it into their workflow, including those from industry leading companies such as Google, Twitter, and Shopify, to name a few.
So what exactly is PostCSS?
According to the projects GitHub page:
PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.
In other words, it’s a framework on which you install (or create) JS plugins that manipulate your CSS.
It parses CSS into AST (an abstract syntax tree), sends this AST through any number of JS plugins you installed, and then spits out the result. What this means is that there are basically no limitations on the kind of manipulation PostCSS plugins can do.
There are quite a few plugins for this tool (currently more than 200). Some of them are listed on the PostCSS GitHub page, while others can be found on the postcss.parts.
The sheer number of plugins, and the ability to write your own, are the things that make it so great. This rich plugin ecosystem allows PostCSS to be almost anything you want it to be.
Another great thing that makes this so attractive as a development tool is its modular nature. You only install plugins that you are actually going to need on your project, meaning you don’t have any unused functionality dragging along.
This “clean” approach is also responsible for its lightning speed.
If you are interested in some benchmark results, you can find them here.
Using PostCSS with Gulp
Since it’s built using JS, it can be integrated in most build tools including Gulp, Grunt, webpack or npm.
In the example that follows, I’ll show you how to use PostCSS with Gulp.
To run this with Gulp you will need to have all the prerequisites for its use installed.
- Node.js (https://nodejs.org/en/)
- NPM (installed when you install Node.js)
- git (https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
It would also be good for you to have some basic understanding of Gulp. If you don’t have any experience with it, take a few minutes to read this blog post written by Ivo (colleague of mine at Slicejack).
Now that you’ve got all of that out of the way, you can now create a new project folder and add Gulp (by following above mentioned blog post).
In a terminal/command prompt pointed at your project folder, run the command:
Within the same project folder create the following:
- folder named “src” – holds unprocessed CSS files
- folder named “dest” – holds PostCSS processed files
- gulpfile.js file
After you’ve completed all of the previous steps, your project folder should look like this:
Open gulpfile.js and add the following code:
Quick glance at the gulpfile.js:
There is Gulp task called “css” which executes a function.
Inside that function there is an array named “plugins” which is currently empty, but will be populated with PostCSS plugins later on.
After the “plugins” array, the files we want to target for processing are specified (*.css = all CSS files in the “src” folder).
First pipe() function, set PostCSS to execute via the function postcss(). “plugins” array is passed as an argument inside postcss() function.
Second pipe() function, writes processed code into a new CSS file in the “dest” folder.
To test all that you have so far, go on and create a “style.css” file inside your “src” folder and add some CSS rules inside.
After you’ve done that, open up your terminal/command prompt and run the following command inside your project folder:
This will run the “css” task you just set up, and as a result you should now find a new “style.css” file inside your “dest” folder.
The contents of that file should be identical as those of the source file.
Adding PostCss plugins
Now’s the time to add a few plugins!
Go to your terminal/command prompt and run the following command inside your project folder:
This will install 3 PostCSS plugins inside your project.
- postcss-import – allows you to merge multiple CSS files into one by using @import rule
- autoprefixer – prefixes your CSS rules to insure browser compatibility
- cssnano – minifies your CSS
To make everything work, you need to add these plugins inside your “gulpfile.js” file.
First, define variables to load each one into your project.
Then, add the plugins to the “plugins” array in your Gulp task.
NOTE: Now that there is more than one CSS file in the “src” folder, source path has changed from “./src/*.css” to “./src/style.css”. Only “style.css” needs to be compiled since you are including all other CSS files as imports within it.
Test everything
It’s always a good idea to test everything to make sure it works.
You can do a simple test to check if all 3 plugins are doing their job:
Create one more CSS file inside your “src” folder and add some CSS that will need to be prefixed in order to work in all browsers (example: transform, transition…).
Import the new CSS file at the top of your source “style.css” by using @import rule.
Now, once you run your Gulp task (gulp css) in the terminal/command prompt:
- the contents of your destination “style.css” should also hold the CSS from the CSS file you imported (postcss-import)
- CSS should be prefixed (autoprefixer)
- CSS should be minified (cssnano)
That’s it! Just like that, you’ve created yourself a custom PostCSS development environment by using Gulp.
Final words
The sheer number of plugins and its modular nature, make PostCSS a truly powerful tool in your development workflow.
Browse through the plugin list and try adding a few plugins to the Gulp task you just created.
If you run into any issues, the comment section is always open.
If you want to dig deeper, there’s an awesome series of tutorials on the webdesingn.tutsplus.com website, written by Kezz Bracey, called PostCSS Deep Dive (I can’t recommend this one highly enough).
