How to use PostCSS with Gulp ?

How to use postcss with gulp

Download/Clone End Project : Github

For most of the developers who use CSS, preprocessors like SASS, LESS, Stylus etc have become an integral part of their development. To code without the features like variables, nesting, mixins feels absurd. Lately, a new player PostCSS has been gaining a lot of traction and it is already being used by many companies like Facebook, Google and Wikipedia. PostCSS is a tool for transforming CSS with JavaScript. It is not a preprocessor it does not transform CSS but it is basically a framework that provides CSS parser which is used by the Javascript plugins.

Advantages of PostCSS

  • If you are familiar with CSS preprocessors like SASS, LESS or Stylus, then you are in for a treat as with a use of simple plugin you can use features like nesting, variables or mixins etc.
  • PostCSS is extendable which means that you can add PostCSS plugins for different uses according to your needs, you are not bound to the functionality or the working of a particular preprocessor.
  • You can try the latest CSS features which are not even out yet with a simple plugin called Cssnext.
  • If you use SASS then you need to install Ruby and other gems, with PostCSS JavaScript handles everything.
  • PostCSS has more than 350 plugins.

Prerequisites :

  • Frontend development basics( HTML, CSS and JS )
  • Basic idea about Gulp

We will use Gulp, the famous automation tool for our CSS transformation, minification etc.

List of plugins we are going to use

  • Gulp Util
  • Gulp Webserver
  • Gulp-postcss
  • Autoprefixer
  • Precss
  • Postcss-animation
  • Cssnano

Let’s get started on PostCSS with Gulp

Step 1 : Make a project folder and run npm init .

Step 2 : Add the following Dev-dependencies, to do that you can copy the below code to the package.json file and run npm install or add these dependencies from npm and adding –save-dev at the end.

Step 3 : Add all your dependencies in gulpfile.js

Step 4 : Create a simple task copyHtml, which will copy HTML files from source to destination folder.

In this case, I have two more variables dest and src which have the respective paths of destination and source. In the “copyHtml” task, Gulp will search for index.html in src folder then it will copy that file to the build folder.

Step 5 : Create a new task “css” , in this task we will use PostCSS and it’s plugins.

First of all, with the help of gulp.src(..) we are getting all the css files in src folder. We can add all the PostCSS plugins into the postcss as argument .

First of all we are using precss plugin which helps you write SASS-like markup, then animation(postcss-animation) which is Animate.css based PostCSS plugin. The third plugin we use is Autoprefixer which as the name says parse CSS and add vendor prefixes and the last plugin, cssnano minifies the CSS files.

All our PostCSS configuration is done, now we are adding two more tasks that will watch for any changes in our HTML and CSS files and a “webserver” task that will run a local server.

Read more about Autoprefixer , gulp-webserver , cssnano , precss and postcss-animation.

Download/Clone End Project : Github

Stay tuned for further tuts. We’ll be back soon. Adios!

Leave a Reply

Your email address will not be published. Required fields are marked *