# Tools

On popular suggestion, we have tried to recreate our Gulp tasks in Laravel Mix as well. However, we recommend you use Gulp, as we do not fully support other tools.

# Laravel Mix

Here is an example config webpack.mix.js for Laravel Mix.

const mix = require("laravel-mix");

const fileIncludeWebpackPlugin = require("file-include-webpack-plugin");

const postcssImport = require("postcss-import");
const tailwindcss = require("tailwindcss");
const tailwindConfig = require("./tailwind.config");
const postcssNested = require("postcss-nested");
const postcssCustomProperties = require("postcss-custom-properties");
const autoprefixer = require("autoprefixer");

// Public Path
mix.setPublicPath("dist");

// Resource Path
mix.setResourceRoot("src");

// Options
mix.options({
  processCssUrls: false,
  cssNano: false,
});

// HTML
mix.webpackConfig({
  plugins: [
    new fileIncludeWebpackPlugin({
      source: "./src",
      destination: "./",
    }),
  ],
});

// CSS
mix.postCss("src/assets/css/style.css", "assets/css", [
  // postcssImport(),
  tailwindcss({
    ...tailwindConfig,
    purge: {
      enabled: mix.inProduction(),
      content: ["src/**/*.html"],
      options: {
        safelist: ["dark"],
      },
    },
  }),
  postcssNested(),
  postcssCustomProperties(),
  autoprefixer(),
]);

// JS
mix.combine(
  [
    "src/assets/js/script.js",
    "src/assets/js/extra.js",
    "src/assets/js/components/",
  ],
  "dist/assets/js/script.js"
);

// Vendor JS
mix.combine(
  [
    "node_modules/@popperjs/core/dist/umd/popper.min.js",
    "node_modules/tippy.js/dist/tippy.umd.min.js",
  ],
  "dist/assets/js/vendor.js"
);

// Vendor Extras
mix.copy(
  [
    "node_modules/chart.js/dist/Chart.min.js",
    "node_modules/sortablejs/Sortable.min.js",
    "node_modules/@glidejs/glide/dist/glide.min.js",
    "node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js",
  ],
  "dist/assets/js"
);

// Images
mix.copy("src/assets/images", "dist/assets/images");

// Fonts
mix.copy(
  "node_modules/line-awesome/dist/line-awesome/fonts/**/*",
  "dist/assets/fonts"
);

// Live Server
mix.browserSync({
  server: {
    baseDir: "dist/",
  },
  notify: false,
});