时间戳

首页 > 解决方案 > 如何优化通过 Netlify CMS 上传的图片？

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

问题描述

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

标签： gulphugonetlifygulp-imageminnetlify-cms

解决方案

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

推荐阅读