Minify CSS using Gulp

For minifying, you can use csso plugin. 
Install 
npm install gulp-csso –save-dev
Create a new task for minifying the css using this plugin

var gulp = require('gulp');
//gulp-load-plugins helps for a cleaner syntax
var $ = require('gulp-load-plugins')({ lazy: true });

gulp.task(“theme-css”,
function () {
return gulp.src([“./Theme/default.css”])
.pipe($.csso())
.pipe($.concat(‘default.min.css’))
.pipe(gulp.dest(‘./build/theme/’));
});

Your First Task using Gulp in ASP.NET MVC Project

Introduction to Gulp

I am going to create the first Gulp task in an ASP.NET MVC project. Go to Node.Js Command Prompt

Install Gulp as a global package

1

Create a package.json file on your project

3

Also Install Gulp locally after  navigate in to the project directory

2

Create a gulpfile.js on your project
In this file, you can load your packages and plugins for the tasks

Open your gulpfile.js and create your first task

4

Run your Gulp task

5

Introduction to Gulp.js

Gulp is a Javascript Task runner. When we are creating Javascript, Html and CSS there’s a lot of little things that we have to do to basically prepare our code either running in a development environment or in production environment.For example minifying and concatenating , adding vendor prefixes, Less to CSS Compilation, Injecting Files Into HTML, Angular Template Cache, Code Analysis and more to our code.

Main API’s In Gulp

  1. gulp.task
  2. gulp.src
  3. gulp.dest
  4. gulp.watch

Installing Gulp

Gulp is created by using Node.js. So you have to install Node.js first , after that we can install gulp and gulp packages using NPM

You can download Node.js from here

In order to get start with Gulp , You have to install it Globally and then install dependent packages and then code your task.

gulp

Create your first Gulp Task