Gulp with Sass

A JavaScript task runner has become a main stay for almost any new project. Some people think that runners like Grunt and Gulp are limited to only Node.js projects, but it's not so. Any project can benefit from a simple task runner. I’ve started using Gulp to do tasks in .Net projects. When it comes to building CSS and JavaScript, specifically, it’s bliss.

I want to share some tricks which will definetly make your's life easier. In this article i am going to explain how to use CSS Compilation for SASS.

Autoprefixer might be newer for use so let us have quick understanding

Autoprefixer parses CSS files and adds vendor prefixes to CSS rules using the Can I Use database to determine which prefixes are needed.

It's converts From

 a {
   transition: transform 1s
 }

To

 a {
   -webkit-transition: -webkit-transform 1s;
   transition: -ms-transform 1s;
   transition: transform 1s
 }

Install Packages

Initialize npm in your project

  npm init
 

Install following Package

  npm install -g gulp
 

  npm install gulp gulp-util gulp-sass gulp-autoprefixer del gulp-plumber  --save-dev
 

Create GulpConfig file

Create Gulpfile

Extras

You can download full source from my github