How to Use PostCSS with Gulp

PostCSS has been gaining popularity rapidly for some time now. If you have not used it yet or don’t know what PostCSS is, then I suggest you take a look at this introductory PostCSS tutorial, which discusses the basics of PostCSS including how to install and run PostCSS with a quick overview of some plugins.

In this tutorial, I will show you how to use PostCSS with Gulp, the popular automation tool. Since this is not an introductory Gulp tutorial I won’t be covering the basics of Gulp. But for a quick refresher, you can check out this excellent article.

[author_more]

Setting Up the Project

Before beginning this tutorial, you should have a project folder that you will work in. The folder should have Gulp installed and have two folders inside it with the names “initial” and “final” (or some other name of your choice). The folder called “initial” will have your raw and unprocessed CSS code. The “final” folder will have the processed files, ready to be used.

Before going any further, navigate to your project folder using the terminal and run the following command:

[code language="bash"]
npm install gulp-postcss --save-dev
[/code]

The --save-dev flag adds the plugin that you are installing to the project.json file as a dependency. This will be helpful in situations where you need to collaborate with others on a project. When other team members run the npm install command on your package, all the plugins will be installed automatically.

At this point your folder structure should be:

• initial — The folder with your raw CSS files.
  • style.css — Unprocessed stylesheet that we will edit later.
• final — The folder with processed CSS files.
• node_modules — The folder with all npm modules.
  • gulp — Created when you installed Gulp.
  • gulp-postcss — Created after running the command above.
• guplfile.js — Your Gulp file.
• package.json — Your package.json file.

Installing a Plugin

Let’s install a basic plugin to get started. The plugin we are going to use is short-color. This basically extends the existing color property to also set the background color using a second value. Run the following command to install short-color.

[code language="bash"]
npm install postcss-short-color --save-dev
[/code]

You could also install both gulp-postcss and postcss-short-color at the same time using:

[code language="bash"]
npm install gulp-postcss postcss-short-color --save-dev
[/code]

After both plugins have been installed, you need to open up and edit the gulpfile.js file so you can start working with the plugin. We begin by including the following lines to enable both plugins:

[code language="javascript"]
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var shortColor = require('postcss-short-color');
[/code]

Now, let’s set up a Gulp task to process our raw CSS file and create a production-ready stylesheet. Here is the code to do so:

Continue reading %How to Use PostCSS with Gulp%

by Nitish Kumar via SitePoint