GETTING STARTED WITH POSTCSS AND GULP

PostCSS is a programming tool that uses JS plugins to transform styles. The plugins can do different tasks in CSS, like transpiling CSS syntax, supporting mixins and variables, linting CSS, inlining images and much more. PostCSS has grown popular in recent times, and is now being used by huge corporations such as Alibaba, Wikipedia and others. It is also relatively easy to use, giving the developer an easy time to get the output that they require.

The following are the ways that are available for you to get started with PostCSS:

1. Codepen
2. Prepos
3. Gulp

I would like us to discuss how to get started using Gulp, the task runner. The other two methods are also good, the only con with them is the fact that you do not have the ability to have control on the plugins you want use.

USING THE TASK RUNNER GULP TO INSTALL POSTCSS

To get started, you will need to have the following installed:

1. Node.js
2. NPM
3. Git

STEP 1

The first step is to install gulp. You can install it by opening terminal running this command. The -g extension means that we are installing globally:

npm install gulp -g

After successfully installing gulp, you will need to set up a gulp project. You will the need to create a package.json file and add it to your project. You can create it by using npm initcommand. After this, you then install the gulp package to the project. This is done by running this command, npm install gulp –save-dev. We use the extension –save-dev so that we can have it saved like a dev dependency.

After successfully following the above step, open the root of the project you have just created, then add a new file and name it gulp.js. We will need to allow this file access the package we installed above. We can do that by adding var gulp = require(‘gulp’); line on the top of the gulp.js file. Finally, you can optionally install plugins for gulp. This is not mandatory since gulp can use npm packages to get plugins.

STEP 2

We have now created our project. Just to make sure that we are on the same page, please check your project root folder and make sure that you have the following in it:

1. Package.json
2. Gulp.js
3. Installed gulp as development dependency

STEP 3

We are now going to go through the basic steps to install and work with PostCSS. The first step here will be to go to the root folder of your project, then create two sub folders, name one of them tstfoo and the other one src. All CSS files that are not processed will go to the src folder while the ones that have been processed to PostCSS will be stored in the tstfoo folder.

STEP 4

The next step will be to install a plugin that will be in charge of handling the processing of PostCSS files. The best plugin to use for this is the gulp-postcss plugin. To install this plugin, open your terminal and navigate to the root folder of your project using the cd command, the run this command;

npm install --save-dev gulp-postcss

Notice that your root folder has more sub folders under the node_modules folder after successful installation of the plugin.

Using a editor of your choice, you can now open the project, then open the gulp.js file for editing. We are now going to create variables that will be used to for calling the gulp-postcss and gulp modules that we just installed. To do that, we will add the following code to the file:

var gulp = require('gulp');
var postcss = require('gulp-postcss');

After successfully adding the above and following all the steps correctly, we are now able to create a task that will read a CSS file, then give an output through PostCSS. Let us start doing it by adding these lines of code to the gulp.js file:

gulp.task('css', function () {
 var tools = [
 ];
 return gulp.src('./src/*.css')
 .tube(postcss(tools))
 .tube(gulp.tstfoo('./tstfoo'));
 });

Going through the piece of code above, the first line has a task called css whose purpose is to have a function executed. In the function to be executed, we have tools, which is an empty array at the moment.

In line four, we specify files that we want processed. That piece of code simply means any files in the scr folder with the extension .css. Then we have the tube function which sets PostCSS to use the function postcss() for execution. We have our array tube here as an argument. This will let PostCSS know about the plugins we will be using. In the last line of code, we are telling PostCSS where to store the processed CSS files.

STEP 5

We will now test what we have done and establish whether we have been successful. Let us now create a new file in the src folder, name it style.css. Open this file and add some CSS code to it, for example, you can add the following;

.example{
 Background-color: blue;
}

Save the file after that, then open the terminal, navigate the the project folder, and run this command:

gulp css

This command is used to run the task we set up above. If you followed all the steps above correctly, then you should notice that you have a new file in the tstfoo folder, named style.css.

If you open the above new file, you will find that the code created is the same as the first file. The reason this has not changed is because we have not installed any plugins yet. If you remember in the introduction, we said that PostCSS uses JS plugins to transform styles. The plugins can do different tasks in CSS, like transpiling CSS syntax, supporting mixins and variables, linting CSS, inlining images and much more. You will need to install plugins of your choice now, depending on what you want to do. Let us go through an example adding one plugin.

STEP 5

Let us add a plugin example and see how it works. We will add a plugin called cssnext used for enabling future syntax. To do that, still pointing at your project folder, open the terminal and run this command;

npm install cssnext --save-dev

After that, open the gulp file and add the following line at the top:

var cssnext = require('cssnext');

We will also need to add the plugin to our tools array that was previously empty, your array should now look like this:

var tools = [
   cssnext
 ];

Now, we will edit the style.css file in our src folder in the project file to something like this:

.cssnext {
   background: color(green(-10%));
 }

After that, let us go back to the terminal again and run the command gulp css. If successful, check the new file in the tstfoo folder and you will notice changes, like this;

.cssnext {
   background: rgba(0, 255, 0);
 }

This means that the plugin was successfully used, with rgba() colour being the result.