Provides integration with your CakePHP application & Laravel Mix.

This branch works with CakePHP 4.0+, see version map for more details.

1. Get project into your system

   Via composer:

   composer require ishanvyas22/asset-mix

2. Load plugin using below command:

   bin/cake plugin load AssetMix

3. Generate basic Javascript, CSS & Sass scaffolding:

   bin/cake asset_mix generate

   Note: Above command will generate scaffolding for vue, but you can generate Bootstrap/jQuery, React or Inertia scaffolding too.

4. Install frontend dependencies

   • Using npm:

   npm install

   or

   • Using yarn:

   yarn install

5. Compile your assets

   • For development:

   npm run dev

   • To watch changes:

   npm run watch

   • For production:

   npm run prod

6. Load AssetMix helper from the plugin into your AppView.php file:

   $this->loadHelper('AssetMix.AssetMix');

After compiling your assets(js, css) with laravel mix, it creates a mix-manifest.json file into your webroot directory which contains information to map the files.

• To generate script tag for compiled javascript file(s):

echo $this->AssetMix->script('app');

Above code will render:

<script src="/js/app.js" defer="defer"></script>

As you can see it works same as Html helper. There is not need to provide full path or even file extension.

• To generate style tag for compiled css file(s):

echo $this->AssetMix->css('main');

Output:

<link rel="stylesheet" href="/css/main.css">

If versioning is enabled, output will look something like below:

<link rel="stylesheet" href="/css/main.css?id=9c4259d5465e35535a2a">

Generate command is used to auto generate basic scaffolding to quickly start developing and using the assets into your project.

Get help:

bin/cake asset_mix -h

Generate default scaffolding:

bin/cake asset_mix generate

Above command will generate:

• package.json
• webpack.mix.js
• assets/
  • css/
  • js/
  • sass/

assets/ directory is where you will store your js, css files which will compile down into your respective webroot/ directory.

Custom directory name:

bin/cake asset_mix generate --dir=resources

You can also use custom directory name instead of default assets directory, above command will create resources directory where you can put your js, css, etc asset files.

Don't want to use Vue.js? Don't worry this plugin doesn't dictate on which javascript library you should use. This plugin provides ability to quickly generate scaffolding for Vue as well as Bootstrap, and React.

bin/cake asset_mix generate bootstrap

bin/cake asset_mix generate react

bin/cake asset_mix generate inertia-vue

bin/cake asset_mix generate react --dir=resources

Do you like this project? Support it by donating:

or Paypal me

Please see CHANGELOG for more information about recent changes.

To see this plugin into action you can refer to this project, which will provide more insight.

The MIT License (MIT). Please see License File for more information.