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

Question

我有一个 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"

Answer 1

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

        });

  })();

Answer 2

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

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

How to optimize images uploaded through Netlify CMS?

gulp

gulp-imagemin

hugo

netlify

netlify-cms