Question

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

因此，在admin config.yml中，我应该将media_folder设置为src / images吗？

我的想法是该任务将运行并将新的缩小的图像存储到静态文件夹中，对吗？还是有其他方法可以做到这一点？

大任务：

""

管理员config.yml

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

Answer 1

在内容存储库中，您可以制作一个构建脚本（如果托管在Netlify上，则可以构建和部署），并且可以在检测到新内容时调整图像的大小和优化并将它们放置到新文件夹中。最重要的是，删除EXIF数据，例如Geolocation。

  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上传的图像？

2 个答案: