Как удалить только то, что было удалено?

Question

[IIIu6ko]

Есть такие таски

gulp.task('imgs', function() {
	return gulp.src('src/blocks/**/*.{jpg,jpeg,png,gif,svg}')
		.pipe(flatten())
		.pipe(gulp.dest('public/imgs'));
});

gulp.task('default', ['imgs'], function() {
	gulp.watch('src/blocks/**/*.{jpg,jpeg,png,gif,svg}', ['imgs']);
});

Запускаем gulp. Создаётся папка public с папкой imgs, в которой все изображения из папок src/blocks/**.
Если добавить изображение например в папку blocks, то сработает watch и перекинет это изображение в public/imgs, а если удалить это же изображение, то также сработает watch, но изображение из public/imgs не удалится.

Есть вариант использовать del и удалять всю папку public/imgs и потом заново собирать все старые изображения и вместе с ними цеплять новые и перекидывать в public/imgs и при удалении изображения будет тоже самое происходить, но удалённого изображения уже не будет, т.к. gulp соберёт все изображения заново.
Этот способ, мягко говорят, так себе.. Если мало изображений, то ещё ладно, а вот если много, то это уже будет требовать какого-то времени.

Нужен плагин, который когда gulp заметит изменения и пройдётся с помощью src по всем папкам blocks - gulp.src('src/blocks/**/*.{jpg,jpeg,png,gif,svg}'), сравнивал все файлы которые нашёл с файлами, которые лежат в папке public/imgs и удалял, либо добавлял конкретный файл, а не все.

Кто-нибудь знает подобный плагин? Необязательно, чтобы он работал как я описал.. Главное чтобы он удалял или добавлял конкретный файл.

Comments

[Алексей Ярков]

Я может как-то не так работаю, но зачем вам следить за картинками? Ну верстка, стили, JS - это понятно. Но неужели у вас картинки так часто меняются, чтобы вотчить их?

Я без сарказма, просто не понимаю зачем так делают.

[IIIu6ko]

Алексей Ярков: Чтобы при добавлении изображения в проект не надо было gulp перезапускать? По БЭМ'у изображение должно лежать в папке с блоком/элементом, а не в папке imgs.
Сервер запускается в папке public, тогда как изображения находятся в src/blocks/block-name/image.jpg.
Как оно должно попадать в public/imgs? Добавлять сразу в public/imgs - не вариант))

Answer 1

[Сергей delphinpro]

не стоит заморачиваться, мне кажется. сделать таск clean, очищающий всё, который запускать перед сборкой продакшн билда.

Но если приспичило, посмотрите в скринкасте Ильи Кантора. В одной из частей он рассказывает, как можно сделать синхронное удаление файлов в dist и src

Comments

[IIIu6ko]

Я запускал clean:imgs, который удалял папку public/imgs полностью, перед выполнением imgs..

gulp.task('imgs', ['clean:imgs'], function() {
  return gulp.src('src/blocks/**/*.{jpg,jpeg,png,gif,svg}')
    .pipe(flatten())
    .pipe(gulp.dest('public/imgs'));
});

gulp.task('clean:imgs', function() {
	return del.sync('public/imgs');
});

[IIIu6ko]

Но я уже написал почему не хочу данный способ использовать..
А про Кантора спасибо, гляну.

Answer 2

[IIIu6ko]

Решил проблему с помощью данного рецепта
https://github.com/gulpjs/gulp/blob/4.0/docs/recip...

Спасибо Сергей (за совет глянуть Илью) и Илья Кантор (за скринкаст, а именно вот за этот момент https://youtu.be/jocvHauHcA4?t=6m33s )

Собственно вот код:

// gulp@4.0.0-alpha.2

var gulp = require('gulp');
var del = require('del');
var path = require('path');
var flatten = require('gulp-flatten'); 

gulp.task('imgs', function() {
  return gulp.src('src/blocks/**/*.{jpg,jpeg,png,gif,svg}')
    .pipe(flatten()) // Удаляет относительный путь до файла.
    .pipe(gulp.dest('public/imgs'))
    .pipe(browserSync.stream());
});

gulp.task('watch', function() {
  gulp.watch('src/blocks/**/*.{jpg,jpeg,png,gif,svg}', gulp.series('imgs')).on('unlink', function (filepath) {
    var filePathFromSrc = path.relative(path.resolve('src/blocks/'), filepath);
    // Concatenating the 'build' absolute path used by gulp.dest in the scripts task
    var destFilePath = path.resolve('public/imgs', filePathFromSrc);
    del.sync(destFilePath);
  });
});

Answer 3

[Олег]

Согласен на счет заморочки, оно того не стоит, но если очень хочется, то примерно так:

// Gulp 4
gulp.watch( 'src/blocks/**/*.{jpg,jpeg,png,gif,svg}', gulp.series( 'imgs' ) ).on( 'unlink', function( delPath ) {

	let path = require( 'path' ), file = path.basename( delPath );

	try {

		require( 'fs' ).unlinkSync( path.join( 'public', 'imgs', file ) );

	} catch (e) { console.log(e); }

});

Comments

[IIIu6ko]

А почему не стоит? Лучше удалять папку целиком?

[Олег]

Александр Шибков: Да, при заключительной сборке первый таск обычно удаляет всю папку dist, а при разработке лишние файлы в билде роли не играют.

[IIIu6ko]

Олег: Чтобы при добавлении изображения в проект не надо было gulp перезапускать? По БЭМ'у изображение должно лежать в папке с блоком/элементом, а не в папке imgs.
Сервер запускается в папке public, тогда как изображения находятся в src/blocks/block-name/image.jpg.
Как оно должно попадать в public/imgs? Добавлять сразу в public/imgs - не вариант))

Может как-то по-другому можно сделать?

[Олег]

Александр Шибков: Посмотрите мою сборку, там все кошерно по БЭМУ https://github.com/werty1001/bemgo

[IIIu6ko]

Олег: Пока слишком сложно для меня)