ishanvyas22/asset-mix

Asset Mix plugin for CakePHP

2.0.0 2023-12-12 10:12 UTC

Requires

• ext-json: *
• ext-mbstring: *
• cakephp/cakephp: ^5.0

Requires (Dev)

• cakephp/cakephp-codesniffer: ^5.1.0
• phpstan/phpstan: ^1.10.27
• phpunit/phpunit: ^10.2

MIT

• Ishan Vyas

• assets
• javascript
• cakephp
• sass
• less
• minifier
• cakephp-plugin
• laravel-mix

README

Provides integration with your CakePHP application & Laravel Mix.

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

❤️ Support The Development

Do you like this project? Support it by donating:

or Paypal me

or

Follow me

• GitHub
• LinkedIn
• Twitter

Installation

1. Install the AssetMix plugin with composer:

   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');

Usage

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 HtmlHelper. 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

The generate command is used to generate starter code for your Javascript application to get you started developing your frontend.

Get help:

bin/cake asset_mix -h

Generate default scaffolding (with vue):

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.

Generate basic Bootstrap/jQuery scaffolding:

bin/cake asset_mix generate bootstrap

Generate React scaffolding:

bin/cake asset_mix generate react

Generate scaffolding for Inertia.js:

# for vue
bin/cake asset_mix generate inertia-vue

# or for react
bin/cake asset_mix generate inertia-react

Generate React scaffolding inside resources directory:

bin/cake asset_mix generate react --dir=resources

Serving CakePHP out of a Subdirectory

Please see docs/ServingFromSubdirectory

Version map

Changelog

Please see CHANGELOG for more information about recent changes.

Reference

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

License

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