PHPackages                             dnunez24/craft-laravel-mix - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. dnunez24/craft-laravel-mix

ActiveCraft-plugin[Utility & Helpers](/categories/utility)

dnunez24/craft-laravel-mix
==========================

Manage asset builds in CraftCMS using Laravel Mix

v0.1.0(8y ago)54.9k↓33.3%MITPHPPHP >= 7.0.0

Since Jun 26Pushed 8y ago1 watchersCompare

[ Source](https://github.com/dnunez24/craft-laravel-mix)[ Packagist](https://packagist.org/packages/dnunez24/craft-laravel-mix)[ RSS](/packages/dnunez24-craft-laravel-mix/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (1)Dependencies (1)Versions (2)Used By (0)

CraftCMS Laravel Mix
====================

[](#craftcms-laravel-mix)

A [CraftCMS](https://craftcms.com/) plugin that enables the use of [Laravel Mix](https://laravel.com/docs/5.4/mix) for managing asset builds.

Requirements
------------

[](#requirements)

- PHP 7+
- Node.js 6+
- CraftCMS 2.5+

Installation
------------

[](#installation)

### Manual

[](#manual)

Download and install this plugin to your `CRAFT_PLUGINS_PATH`. Rename the directory to `mix` to correspond with the plugin handle. For example, if your `CRAFT_PLUGINS_PATH` is `craft/plugins`, you could run the following from the root of your project:

```
cd craft/plugins
curl -Lo mix.zip https://api.github.com/repos/dnunez24/craft-laravel-mix/zipball
unzip mix.zip
```

Then install the plugin from the CraftCMS administrative panel.

### Composer

[](#composer)

If you use Composer for managing dependencies, you can install this plugin by requiring it from your `composer.json` file. This plugin's composer package type is `craft-plugin` so Composer can install it directly into your Craft plugins directory. However, before installing the dependency, you must add an extra configuration option to rename the destination directory of the plugin. For example, if your `CRAFT_PLUGINS_PATH` is `craft/plugins`, then you would add the following configuration to your `composer.json`:

```
...
    "extra": {
        "installer-paths": {
            "craft/plugins/mix/": [
                "dnunez24/craft-laravel-mix"
            ]
        }
    }
...
```

*For more information about configuring the destination of the package during installation, see the [Composer Installers](https://github.com/composer/installers).*

Then simply require the package to ad it to your `composer.json` file and install it:

```
composer require dnunez24/craft-laravel-mix

```

Create a `package.json` file with the following contents to install Laravel Mix dependencies and configure asset build tasks.

```
{
    "private": "true",
    "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "cross-env": "^5.0.0",
        "laravel-mix": "^1.0.0"
    }
}
```

Install the Node.js dependencies using `npm` or `yarn`.

```
npm install # OR yarn install
```

Configuration
-------------

[](#configuration)

To demonstrate usage of the plugin, let's imagine a project with the following directory structure.

```
...
src/
  assets/
    js/
      main.js
    css/
      main.scss
public/
  js/
  css/
...

```

Create a `webpack.mix.js` file at the root of your project to configure Laravel Mix for building your assets. See the [Laravel Mix](https://laravel.com/docs/5.4/mix) documentation for configuration details and more options. Be sure to configure the `publicPath` option to point at the directory from which you will serve static assets (images, fonts, javascript and CSS). Here's an example configuration as a starting point that would work with the previously described project structure:

```
const { mix } = require('laravel-mix');

// this must be the relative path from the webpack.mix.js
// file to your public web directory
mix.setPublicPath('public')
  // outputs built SCSS files to the public/css directory
  .sass('src/assets/css/main.scss', 'public/css')
  // outputs built JS files to the public/js directory
  .js('src/assets/js/main.js', 'public/js');

if (mix.inProduction()) {
  mix.version();
}
```

This plugin also provides a CraftCMS configuration value to set the public directory that it uses to locate and read from the Mix manifest file. You may want to override the setting if your path differs from the default (`CRAFT_BASE_PATH/public`). You can do this by creating a file at `CRAFT_CONFIG_PATH/mix.php` with the following contents:

```