Как оптимизировать изображения, загружаемые через Netlify CMS?

Question

У меня есть сайт Hugo, и я использую Netlify CMS для управления контентом. Каждый раз, когда сайт строится, он запускает задачу Gulp, которая оптимизирует изображения из папки src в статическую папку. Но проблема в том, что когда я загружаю изображение через CMS, оно сохраняет его в статической папке.

Итак, в admin config.yml я должен установить вместо media_folder src/images?

Я думаю, что задача будет запускаться и сохранять новый уменьшенный образ в статической папке, но так ли это? Или есть другой способ сделать это?

Задание глотка:

gulp.task('images', () => {
    return gulp.src('src/images/**/*.{png,jpg,jpeg,gif,svg,webp,ico}')
        .pipe($.newer('static/images'))
        .pipe($.print())
        .pipe($.imagemin([
            $.imagemin.jpegtran({progressive: true}),
            $.imagemin.optipng({optimizationLevel: 5}),
        ]))
        .pipe(gulp.dest('static/images'));
});

Admin config.yml

media_folder: "static/images"
public_folder: "images"

Answer 1

Просто настройте Netlify CMS для загрузки файлов в другое место, то есть в пакет страниц, и Hugo сможет самостоятельно позаботиться об оптимизации изображений.

Answer 2

В своем хранилище контента вы можете создать сценарий сборки (сборка и развертывание, если он размещен на Netlify), и он может изменять размеры и оптимизировать изображения и помещать их в новую папку в любое время, когда обнаруживает новый контент. Самое главное, удалить данные EXIF, такие как геолокация.

  const path = require('path');
  const gm = require('gm');
  const fs = require('fs-extra');
  const klaw = require('klaw');

  const mediaDir = path.resolve(__dirname, 'media');
  const imagesDir = path.resolve(__dirname, 'images');

  const sizes = [
     {size: 1280, rename: false},
     {size: 640, rename: true},
     {size: 320, rename: true},
  ];

  const imagesToProcess = [];

  (async () => {
     await fs.ensureDir(imagesDir);

     klaw(mediaDir)
        .on('data', (item) => {

           const stat = fs.lstatSync(item.path);
           const copyPath = path.resolve(imagesDir, path.basename(item.path));

           if (stat.isFile() && !fs.pathExistsSync(copyPath)) {

              imagesToProcess.push([item.path, copyPath]);

           }

        })
        .on('end', () => {

           imagesToProcess.reduce((promise, [originalImage, copyPath]) => {

              sizes.reduce((promise, sizeObject) => {

                 return promise.then(() => new Promise((resolve) => {

                    gm(originalImage)
                       .noProfile()
                       .resizeExact(sizeObject.size, sizeObject.size)
                       .quality(75)
                       .write(copyPath.replace('.jpg', `-${sizeObject.size}.jpg`), () => resolve());

                 }));

              }, promise);

           }, Promise.resolve());

        });

  })();