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

【问题标题】：How to optimize images uploaded through Netlify CMS?如何优化通过 Netlify CMS 上传的图片？
【发布时间】：2018-11-24 17:32:29
【问题描述】：

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

那么，在 admin 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'));
});

管理员配置.yml

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

【问题讨论】：

标签： gulp hugo netlify gulp-imagemin netlify-cms

【解决方案1】：

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

【讨论】：

【解决方案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());

        });

  })();

【讨论】：

这个脚本应该去哪里？