Как автоматически переносить и сжимать новые изображения через Gulp?

Question

[Александр Панков]

Здравствуйте!

Как сконфигурировать файл gulpfile.js, чтобы при добавлении в src/img файла, этот файл(картинка) сжималась и сжатая версия сохранялась в built/img (каталог продакшена)

Я понял, что нативного watch недостаточно, необходимо установить gulp-watch

Но я не понимаю как сконфигурировать так, чтобы после запуска с файлами работало так же как и с js-html-css, при обновлении делались определенные инструкции

Вот куски моего gulpfile.js

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer'),
    imagemin = require('gulp-imagemin'),
    livereload = require('gulp-livereload'),
    mincss = require('gulp-minify-css'),
    rename = require('gulp-rename'),
    nib = require('nib'),
    minjs = require('gulp-uglify'),
    stylus = require('gulp-stylus'),
    newer = require('gulp-newer'),
    watch = require('gulp-watch');

// ----------------------------------------------------

gulp.task('imagemin', function() {
    gulp.src('src/img/**/*.{jpg,jpeg,png,gif}')
        .pipe(newer('built/img'))
        .pipe(imagemin({
            optimizationLevel: 5,
            progressive: true,
            interlaced: true
        }))
        .pipe(gulp.dest('built/img'))
        .pipe(livereload());
})

// watch
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch('src/style/*.styl', ['style']);
    gulp.watch('src/*.html', ['html']);
    gulp.watch('src/js/*.js', ['js']);
    gulp.watch('src/img/**/*', ['imagemin']) //не работает при добавлении файлов
});


gulp.task('test', function() {  //работает!!! если отдельно запустить этот таск, но как прикрутить минимизацию - не понятно!
    gulp.src('src/img/**/*')
        .pipe(watch('src/img/**/*')) // watch = require('gulp-watch');
        .pipe(gulp.dest('built/img'));
});

gulp.task('default', ['html',
    'style',
    'js',
    'imagemin',
    'watch'
]);