This is the fourth part of the gulp for beginners series which deals in introducing gulp.js and then making you familiar with some basic gulp plugins. This article talks about 4 gulp plugins which are
This is a very basc gulp plugin which is used to minify the css files. The snippet is given below :
var gulp = require('gulp');
var cleanCss = require('gulp-clean-css');
// name of the task is : gulp.min.css
gulp.task('mincss', function() {
return gulp.src('source/*.css') //add your custom source here
.pipe(cleanCss({compatibility: 'ie8'}))
.pipe(gulp.dest('./css')); //destination folder comes here
});
Run it at bash or command line using the following command :
$gulp mincss
This is a gulp plugin which is used to minify the .jpeg
, .png
, .svg
and gif
files.
The snippet is given below :
var gulp = require('gulp');
var imagemin = require('gulp-imagemin');
gulp.task('default', () =>
gulp.src('source/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
Run it at bash or command line using the following command :
$gulp
This gulp plugin is used to minify HTML
files.
var gulp = require('gulp');
var htmlmin = require('gulp-htmlmin');
gulp.task('minify', function() {
return gulp.src('source/*.html')
.pipe(htmlmin({collapseWhitespace: true}))
.pipe(gulp.dest('dist'));
});
Run it at bash or command line using the following command :
$ gulp minify
This Gulp plugin is used to minify the SVG files. The snippet is given below :
var gulp = require('gulp');
var svgmin = require('gulp-svgmin');
gulp.task('default', function () {
return gulp.src('source/image.svg')
.pipe(svgmin())
.pipe(gulp.dest('./dest'));
});
Run it at bash or command line using the following command :
$ gulp