CSS Post-Processing With Pleeease
Pre-processors such as Sass, Less, and Stylus have revolutionized CSS development. If you’re a pre-processor skeptic like I was, try using Sass for a project or two: you won’t ever return to raw CSS again. Despite this attention, developers rarely consider post-processors. Pleeease could change that perception…
What’s a CSS Post-Processor?
A post-processor applies changes to a CSS file after it’s been hand-coded or generated by a pre-processor. A basic example is minification: your CSS file is parsed to remove white space, comments, and unnecessary dimensions, e.g. margin: 0px 0px 0px 0px; becomes margin:0;. The result is saved to a new, smaller file, e.g. styles.min.css.
Pleeease is a Node.js application that combines a selection of great post-processors into one handy command-line tool that works on any platform.
Command-line? No Thanks!
Don’t be afraid; Pleeease is not complicated to install or run. That said, if you cannot bear the thought of typing a few commands, try the Pleeease online playground; you won’t get all the benefits but you can test the system using cut-and-paste.
Installing Pleeease
First, install Node.js from nodejs.org. You can download installers for Windows, Mac OS, and Linux or use a package manager.
Next, open a command-line/terminal window and enter the following command on Windows:
[code language=”bash”] npm install -g pleeease[/code]
or, on Mac/Linux:
[code language=”bash”] sudo npm install -g pleeease[/code]
Note the unique spelling of “pleeease”, which has four e’s with three in the middle.
Using Pleeease
From the command line you now need to navigate using the cd command to a web project folder where your CSS files reside. Assuming you have a folder named ‘myprojectstyles’ in the Windows C: drive, you’d enter:
cd myprojectstyles
[/code]
or, on Mac/Linux, if you have a ‘myproject/styles’ folder in your home folder, you’d enter:
[code language=”bash”] cd ~/myproject/styles[/code]
Normally the prompt will change to show which folder you’re in. To run Pleeease, now enter:
[code language=”bash”] pleeease compile[/code]
By default, Pleeease will join all the CSS files into one and create a new app.min.css file in the same folder. Open that file in an editor to see what has been done.
Continue reading %CSS Post-Processing With Pleeease%
