Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question