# Other Workflows

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

# 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,
});