A
A
Alexander Pankov2015-01-17 13:25:46
Work organization
Alexander Pankov, 2015-01-17 13:25:46

How to automatically migrate and compress new images via Gulp?

Hello!
How to configure the gulpfile.js file so that when a file is added to the src / img file, this file (image) is compressed and the compressed version is saved in built / img (production directory)
I realized that native watch is not enough, you need to install gulp-watch
But I don’t I understand how to configure it so that after launch it works with files in the same way as with js-html-css, certain instructions are made when updating.
Here are pieces of my 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'
]);

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question