0

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

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

管理员配置.yml

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

2 回答 2

1

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

于 2020-06-29T12:58:36.033 回答
0

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

        });

  })();
于 2018-11-29T23:26:24.753 回答