Gulp CSS Minify Plugin

In this tutorial we will learn, how to minify css files using gulp task.

Installing Gulp Plugin :

Using below command, we can install gulp-minify-css plugin.

npm install --save-dev gulp-minify-css

Add Dependency and Create Task

After installing above plugin we need to add dependencies and create task for optimizing css -

var gulp = require('gulp');
var minify = require('gulp-minify-css');

gulp.task('css', function(){
   gulp.src('src/styles/*.css')
   .pipe(concat('styles.css'))
   .pipe(minify())
   .pipe(gulp.dest('build/styles/'));
});

Now run below gulp task to optimize stylesheets -

gulp css

It will produce below output -

F:\wamp\www\gulp>gulp
[08:57:29] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[08:57:29] Starting 'css'...
[08:57:29] Finished 'css' after 6.05 ms