It is the fifth 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 as follows :

1. gulp-watch
2. gulp-sourcemaps
3. gulp-concat-css
4. gulp-zip

This is a very basic gulp plugin which is used to constantly look for changes in a set of files. The snippet is given below :

		        
var gulp = require('gulp');
var concat = require('gulp-concat');
var watch = require('gulp-watch');

gulp.task('scripts' , function() {
	return gulp.src('source/*.js')			//add your custom source here
	.pipe(concat('min.js'))					// name of the output file
	.pipe(gulp.dest('destination4'));		// name of the destination folder comes here
});

gulp.task ( 'watch', function () {
    gulp.watch ('source/*.js' , [ 'scripts']);
});
                
	            

Run it at bash or command line using the following command :

					
$gulp	watch
					
	            

Source are basically used along with some other plugin. for example when you use gulp-clean-css the minified css file is created but with the help of source maps we can also reach the original file with a url which was embedded in the min file. The snippet is given below :

		        
var gulp = require('gulp');
var cleanCss = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');

// name of the task is :  source-maps 
gulp.task('source-maps', function() {		
    return gulp.src('source/*.css')			//add your custom source here
        .pipe(sourcemaps.init())
        .pipe(cleanCSS())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('maps'));			// name of the destination folder comes here
});	
                
	            

Run it at bash or command line using the following command :

		        
$gulp source-maps
                
	            

This gulp plugin is used to concatenate the css files from 2 different locations. Snippet is given below :

							
var gulp = require('gulp');
var concatCss = require('gulp-concat-css');

gulp.task('default', function () {
  return gulp.src('source/*.css')
    .pipe(concatCss("gulp.min.css"))
    .pipe(gulp.dest('out'));
});
							
							

Run it at bash or command line using the following command :

							
$ gulp
							
						

This Gulp plugin is used to zip or compress the folder files. The snippet is given below :

							
var gulp = require('gulp');
var zip = require('gulp-zip');


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