Answer the question
In order to leave comments, you need to log in
How to configure gulp so that the images do not shrink all over again when a new image enters the folder?
How to set up pictures so that when they get into the source folder, they are copied to the public folder and only new pictures are compressed? Now, when any picture gets into the source folder, all pictures are copied and compressed again, which takes more than 10 minutes. It is necessary to make sure that every time you run gulp, those pictures that have already been said and copied are not copied again, but during work, if I add pictures, they would only be copied.
Here are the gulp settings:
const gulp = require('gulp');
const concatCss = require('gulp-concat-css');
const rename = require('gulp-rename');
const minifyCss = require('gulp-minify-css');
const debug = require('gulp-debug');
const sourcemaps = require('gulp-sourcemaps');
const gulpIf = require('gulp-if');
const del = require('del');
const newer = require('gulp-newer');
const browserSync = require('browser-sync').create();
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const autoprefixer = require('gulp-autoprefixer');
const include = require('gulp-include');
const rigger = require('gulp-rigger');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cache = require('gulp-cache');
const changed = require('gulp-changed');
gulp.task('html_index', function() {
return gulp.src('frontend/assets/include/index/index.html')
.pipe(rigger())
.pipe(gulp.dest('public'));
});
gulp.task('html_page-1', function() {
return gulp.src('frontend/assets/include/page-1/index.html')
.pipe(rigger())
.pipe(rename('architecture.html'))
.pipe(gulp.dest('public'));
});
gulp.task('html_page-2', function() {
return gulp.src('frontend/assets/include/page-2/index.html')
.pipe(rigger())
.pipe(rename('office.html'))
.pipe(gulp.dest('public'));
});
gulp.task('html_page-3', function() {
return gulp.src('frontend/assets/include/page-3/index.html')
.pipe(rigger())
.pipe(rename('participants.html'))
.pipe(gulp.dest('public'));
});
gulp.task('html_page-4', function() {
return gulp.src('frontend/assets/include/page-4/index.html')
.pipe(rigger())
.pipe(rename('visitors.html'))
.pipe(gulp.dest('public'));
});
gulp.task('html_page-5', function() {
return gulp.src('frontend/assets/include/page-5/index.html')
.pipe(rigger())
.pipe(rename('interior.html'))
.pipe(gulp.dest('public'));
});
gulp.task('styles', function () {
return gulp.src('frontend/styles/**/*.css')
.pipe(concatCss('all.css'))
.pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
.pipe(minifyCss('all.css'))
.pipe(rename('all.min.css'))
.pipe(gulp.dest('public/css'));
});
gulp.task('images', function() {
return gulp.src('frontend/assets/images/**/*.{jpg,jpeg,png,gif}')
.pipe(cache(imagemin({
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
une: [pngquant()]
})))
.pipe(gulp.dest('public/images'));
});
gulp.task('js', function() {
return gulp.src('frontend/assets/js/**/*')
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('public/js'));
});
gulp.task('libs', function() {
return gulp.src([
'frontend/assets/libs/jquery-1.9.1.min.js',
'frontend/assets/libs/owl.carousel.min.js',
'frontend/assets/libs/jquery.easing.1.3.js',
'frontend/assets/libs/jquery.coda-slider-3.0.min.js',
'frontend/assets/libs/tabulous.min.js',
'frontend/assets/libs/masonry.pkgd.min.js',
])
.pipe(concat('libs.min.js'))
.pipe(gulp.dest('public/js'));
});
gulp.task('clean', function() {
return del('public/*');
});
gulp.task('clear', function() {
return cache.clearAll();
});
gulp.task('assets', function() {
return gulp.src('frontend/assets/{fonts,images}/**/*.*')
.pipe(changed('public'))
.pipe(gulp.dest('public'));
});
/*gulp.task('assets', function() {
return gulp.src(['frontend/assets/{fonts,images}/**', 'frontend/assets/index.html'], {since: gulp.lastRun('assets')})
.pipe(changed('public'))
.pipe(gulp.dest('public'));
});*/
gulp.task('build', gulp.series(
'clean',
gulp.parallel('html_index', 'html_page-1', 'html_page-2', 'html_page-3', 'html_page-4', 'html_page-5', 'styles', 'images', 'js', 'libs', 'assets'))
);
gulp.task('watch', function() {
gulp.watch('frontend/assets/**/*.*', gulp.series('html_index'));
gulp.watch('frontend/assets/**/*.*', gulp.series('html_page-1'));
gulp.watch('frontend/assets/**/*.*', gulp.series('html_page-2'));
gulp.watch('frontend/assets/**/*.*', gulp.series('html_page-3'));
gulp.watch('frontend/assets/**/*.*', gulp.series('html_page-4'));
gulp.watch('frontend/assets/**/*.*', gulp.series('html_page-5'));
gulp.watch('frontend/styles/**/*.*', gulp.series('styles'));
gulp.watch('frontend/assets/images/**/*.*', gulp.series('images'));
gulp.watch('frontend/assets/js/**/*.*', gulp.series('js'));
gulp.watch('frontend/assets/libs/**/*.*', gulp.series('libs'));
gulp.watch('frontend/assets/**/*.*', gulp.series('assets'));
});
gulp.task('serve', function() {
browserSync.init({
server: 'public'
});
browserSync.watch('public/**/*.*').on('change', browserSync.reload);
});
gulp.task('dev',
gulp.series('build', gulp.parallel('watch', 'serve'))
);
Answer the question
In order to leave comments, you need to log in
gulp-changed
gulp.task('images', function() {
return gulp.src('frontend/assets/images/**/*.{jpg,jpeg,png,gif}')
.pipe(changed('public/images'))
.pipe(cache(imagemin({
interlaced: true,
progressive: true,
svgoPlugins: [{removeViewBox: false}],
une: [pngquant()]
})))
.pipe(gulp.dest('public/images'));
});
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question