1

Каким способом принято работать с изображениями в gulp в процессе разработки?

Сжать и перенести их отдельным таском не сложно, миллион примеров. А вот как синхронизировать картинки, что бы удаляя/переименовывая/перенося что то в рабочем каталоге, оно аналогично вело себя и в билде, при том что в рабочем каталоге картинка до сжатия, а в билде картинка после сжатия, это вроде как 2 разные картинки и в дополнение, что бы редактировались только измененные картинки, а не все.

Расскажите словами и названиями необходимых пакетов, их порядком. Хочется понять принцип, подход.

1 ответ 1

0

Не так давно я себе сделал вот такой вотчер для картинок.

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

Тестовые прогоны отработали нормально, при удалении/перемещении, файлы в папке билда удаляются/переносятся нормально.

let gulp = require('gulp');
let del = require('del');
let path = require('path');
let touch = require("gulp-touch-cmd");


function watch_images() {
    let watcher = gulp.watch(src_path.images + '**/*');
    watcher.on('all', copyimages);
    // отслеживание перемещения/переименования/удаления
    watcher.on('unlink', function (filepath) {
        let filePathFromSrc = path.relative(path.resolve(src_path.images), filepath);
        let destFilePath = path.resolve(build_path.images, filePathFromSrc);
        return del.sync(destFilePath);
    });
    return watcher;
}

////////// Копирование изображений
function copyimages(status, file) {
    // Это событие отрабатывается другой функцией
    if (status === 'unlink') {
        return;
    }
    // если функция вызвана из билд таска или имя файла не указано
    // пересобираем все картинки
    if (file === undefined || status instanceof Function) {
        file = src_path.images + '*';
        // Очищаем место назначения
        del.sync(build_path.images);
    }

    return gulp.src(file)
        .pipe(gulp.dest(build_path.images))
        .pipe(touch()); /* обновление времени изменения файла */
}

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.