livereload - Image is not resize immediately after uploading - node.js

Question

I have created gulp tasks scheduler for JavaScript minification and image resizing. All things work nicely when I executes command manually.
Command:
gulp
But when I include gulp-livereload module to perform operation automatically, Command line watch continuously when I upload images, it does not resize.
Just cursor is blinking. When uploads an image, no activities display in command watch list.
gulpfile.js
// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var watch = require('gulp-watch');
var imageresize = require('gulp-image-resize');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var liveReload = require("gulp-livereload");
// JS hint task
gulp.task('jshint', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/services/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(liveReload());
});
gulp.task('jsminification', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/modules/**/filter/*.js',
'./app/client/services/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./app/build/scripts/'))
.pipe(liveReload());
});
gulp.task('resize', function () {
// set the folder name and the relative paths
// in the example the images are in ./assets/images
// and the public directory is ../public
var paths = {
folder: 'media/',
src: './app/client/',
dest: './app/client/resize/'
};
// create an array of image groups (see comments above)
// specifying the folder name, the ouput dimensions and
// whether or not to crop the images
var images = [
// {folder: 'bg', width: 1200, crop: false},
{folder: 'photo', width: 120, height: 120, crop: true},
//{folder: 'projects', width: 800, height: 500, crop: true}
];
console.log("resize called");
// loop through image groups
images.forEach(function (type) {
console.log(type);
var source_ = paths.src + paths.folder + type.folder + '/*';
var scale_ = type.width + "x" + type.height + "/";
//var destination_ = paths.dest + paths.folder + scale_ + type.folder;
var destination_ = paths.dest + scale_ + type.folder;
console.log(">source:" + source_);
console.log(">scale:" + scale_);
console.log(">destination:" + destination_);
// build the resize object
var resize_settings = {
width: type.width,
crop: type.crop,
// never increase image dimensions
upscale: false
}
// only specify the height if it exists
if (type.hasOwnProperty("height")) {
resize_settings.height = type.height;
}
gulp
// grab all images from the folder
.src(source_)
// resize them according to the width/height settings
.pipe(imageresize(resize_settings))
// output each image to the dest path
// maintaining the folder structure
.pipe(gulp.dest(destination_))
.pipe(liveReload());
});
});
gulp.task('watch', function () {
liveReload.listen({host: process.env['HOST'], port: process.env['PORT']});
gulp.watch('./app/client/media/photo/*.{png,jpg,jpeg}', ['resize']);
});
gulp.task('default', ['jshint', 'jsminification', 'resize', 'watch']);
I want to resize image automatically as new image uploads in photo folder.

Answer 1

After some R&D I have found following solution using "gulp-watch" module and it works fine.
// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var imageresize = require('gulp-image-resize');
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var watch = require("gulp-watch");
var newer = require("gulp-newer");
var paths = {
folder: 'media/',
src: './app/client/',
dest: './app/client/resize/'
}
var images = [
{folder: 'photo', width: 120, height: 120, crop: true},
];
// JS hint task
gulp.task('jshint', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/services/*.js'])
.pipe(jshint())
.pipe(jshint.reporter('default'));
});
// JS minification task
gulp.task('jsminification', function () {
gulp.src([
'./app/client/app.js',
'./app/client/app.routes.js',
'./app/client/modules/**/controllers/*.js',
'./app/client/modules/**/directives/*.js',
'./app/client/modules/**/services/*.js',
'./app/client/modules/**/filter/*.js',
'./app/client/services/*.js'])
.pipe(concat('script.js'))
.pipe(stripDebug())
.pipe(uglify())
.pipe(gulp.dest('./app/build/scripts/'));
});
// image resize
gulp.task('resize', function () {
// loop through image groups
images.forEach(function (type) {
var source_ = paths.src + paths.folder + type.folder + '/*';
var scale_ = type.width + "x" + type.height + "/";
//var destination_ = paths.dest + paths.folder + scale_ + type.folder;
var destination_ = paths.dest + scale_ + type.folder;
// build the resize object
var resize_settings = {
width: type.width,
crop: type.crop,
// never increase image dimensions
upscale: false
}
// only specify the height if it exists
if (type.hasOwnProperty("height")) {
resize_settings.height = type.height;
}
gulp
// grab all images from the folder
.src(source_)
.pipe(newer(destination_))
// resize them according to the width/height settings
.pipe(imageresize(resize_settings))
// optimize the images
.pipe(imagemin({
progressive: true,
// set this if you are using svg images
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
// output each image to the dest path
// maintaining the folder structure
.pipe(gulp.dest(destination_));
});
});
// Gulp default task
gulp.task('default', ['jshint', 'jsminification', 'resize'], function () {});
// Gulp watch for new image resizing
watch('./app/client/media/photo/*.+(png|jpg|jpeg|gif)', function () {
gulp.run('resize');
});