vbenjs / vite-plugin-imagemin

A vite plugin for compressing image assets.
MIT License
207 stars 28 forks source link

Not finding images in src to compress #3

Closed phillduffy closed 3 years ago

phillduffy commented 3 years ago

I am unable to get Imagemin to pick up images in my /src/ directory, it was working before when everything was in root.

vite.config.js

const {
    resolve
} = require("path");

import handlebars from "vite-plugin-handlebars";
import {
    minifyHtml
} from "vite-plugin-html";
import viteImagemin from "vite-plugin-imagemin";
import glob from "glob";
import path from "path";

import siteData from "./data";

module.exports = {
    root: path.join(__dirname, "src"),
    build: {
        outDir: path.join(__dirname, "dist"),
        emptyOutDir: true,
        rollupOptions: {
            input: glob.sync(path.resolve(__dirname, "src", "**/*.html")),
        },
    },
    plugins: [
        handlebars({
            partialDirectory: resolve(__dirname, "partials"),
            context(pagePath) {
                return siteData.getPage(pagePath);
            },
            runtimeOptions: {
                data: {
                    fertilityPages: siteData.fertilityPages,
                    therapies: siteData.therapies,
                },
            },
        }),
        viteImagemin({
            gifsicle: {
                optimizationLevel: 3,
                interlaced: false,
            },
            optipng: {
                optimizationLevel: 7,
            },
            webp: {
                quality: 75,
            },
            mozjpeg: {
                quality: 65,
            },
            pngquant: {
                quality: [0.65, 0.9],
                speed: 4,
            },
            svgo: {
                plugins: [{
                        removeViewBox: false,
                    },
                    {
                        removeEmptyAttrs: false,
                    },
                ],
            },
        }),
        minifyHtml(),
    ],
};

Folder structure

image

phillduffy commented 3 years ago

I have managed to get it working by changing it to the following. Basically, the root and outDir had to change.

const { resolve } = require("path");

import handlebars from "vite-plugin-handlebars";
import { minifyHtml } from "vite-plugin-html";
import viteImagemin from "vite-plugin-imagemin";
import glob from "glob";
import path from "path";

import siteData from "./data";

export default () => {
  return {
    root: "src",
    build: {
      outDir: "../dist",
      emptyOutDir: true,
      rollupOptions: {
        input: glob.sync(path.resolve(__dirname, "src", "**/*.html")),
      },
    },
    plugins: [
      minifyHtml(),
      handlebars({
        partialDirectory: resolve(__dirname, "partials"),
        context(pagePath) {
          return siteData.getPage(pagePath);
        },
        runtimeOptions: {
          data: {
            fertilityPages: siteData.fertilityPages,
            therapies: siteData.therapies,
          },
        },
      }),
      viteImagemin({
        verbose: true,
        gifsicle: {
          optimizationLevel: 3,
          interlaced: false,
        },
        optipng: {
          optimizationLevel: 7,
        },
        webp: {
          quality: 75,
        },
        mozjpeg: {
          quality: 65,
        },
        pngquant: {
          quality: [0.65, 0.9],
          speed: 4,
        },
        svgo: {
          plugins: [
            {
              removeViewBox: false,
            },
            {
              removeEmptyAttrs: false,
            },
          ],
        },
      }),
    ],
  };
};
anncwb commented 3 years ago

Can give me a minimal reproduction?

phillduffy commented 3 years ago

I think this repo is as minimal as I can get

ImageMin Issue Repo

If you change to just the string of "src" and "dist" is works

anncwb commented 3 years ago

outDir cannot set an absolute path

    root: resolve(__dirname, "./src"),
    build: {
      outDir: 'dist',
      emptyOutDir: true,
    },