Yeti

# 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 tailwindcssNesting = require("tailwindcss/nesting");
const tailwindcss = require("tailwindcss");
const postcssCustomProperties = require("postcss-custom-properties");
const autoprefixer = require("autoprefixer");

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

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

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

// CSS
mix.postCss("src/assets/css/style.css", "dist/assets/css", [
  postcssImport(),
  tailwindcssNesting(),
  tailwindcss(),
  postcssCustomProperties(),
  autoprefixer(),
]);

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

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

// Vendor JS
mix.combine(
  [
    // Tippy.js
    "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(
  [
    // Chart.js
    "node_modules/chart.js/dist/Chart.min.js",
    // Sortable.js
    "node_modules/sortablejs/Sortable.min.js",
    // Glide.js
    "node_modules/@glidejs/glide/dist/glide.min.js",
    // CKEditor
    "node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js",
  ],
  "dist/assets/js"
);

if (!mix.inProduction()) {
  mix.copy(
    [
      // CKEditor
      "node_modules/@ckeditor/ckeditor5-build-classic/build/ckeditor.js.map",
      // Tippy.js
      "node_modules/tippy.js/dist/tippy.umd.min.js.map",
    ],
    "dist/assets/js"
  );
}

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

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

# Builds

You can run the following commands to build for development or production use. These commands outputs to dist directory.

# Development

npx mix watch

# Production

npx mix --production

← Laravel →