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 :
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