如何优化通过 Netlify CMS 上传的图片?

How to optimize images uploaded through Netlify CMS?

我有一个 Hugo 站点,我正在使用 Netlify CMS 来管理内容。每次构建网站时,它 运行 都会执行一项 Gulp 任务,将图像从 src 文件夹优化到静态文件夹。但是,问题是,当我通过 CMS 上传图片时,它会将其存储在静态文件夹中。

那么,在管理员 config.yml 中,我应该将 media_folder 设置为 src/images 吗?

我的想法是该任务 运行 并将新的缩小图像存储到静态文件夹中,但对吗?或者还有其他方法吗?

Gulp 任务:

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'));
});

管理员config.yml

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

在您的内容存储库中,您可以制作一个构建脚本(如果托管在 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());

        });

  })();

只需配置 Netlify CMS 将文件上传到不同的位置,即页面包,然后 Hugo 就可以在本地处理图像优化。