Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ishanvyas22/asset-mix
Provides helpers functions for CakePHP to use Laravel Mix.
https://github.com/ishanvyas22/asset-mix
assets cakephp cakephp-plugin javascript laravel-mix minifier react reactjs saas scaffolding vue vuejs
Last synced: 3 months ago
JSON representation
Provides helpers functions for CakePHP to use Laravel Mix.
- Host: GitHub
- URL: https://github.com/ishanvyas22/asset-mix
- Owner: ishanvyas22
- License: mit
- Created: 2019-10-26T10:16:15.000Z (over 4 years ago)
- Default Branch: cake5
- Last Pushed: 2023-12-20T04:42:42.000Z (6 months ago)
- Last Synced: 2024-03-22T11:50:36.329Z (3 months ago)
- Topics: assets, cakephp, cakephp-plugin, javascript, laravel-mix, minifier, react, reactjs, saas, scaffolding, vue, vuejs
- Language: PHP
- Homepage:
- Size: 224 KB
- Stars: 29
- Watchers: 2
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG-1.x.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Lists
- awesome-cakephp - AssetMix plugin - Provides integration with [Laravel Mix](https://laravel-mix.com) asset compilation. (Asset Management)
README
# AssetMix plugin for CakePHP
[](https://packagist.org/packages/ishanvyas22/asset-mix)
[](https://packagist.org/packages/ishanvyas22/asset-mix)
[](https://packagist.org/packages/ishanvyas22/asset-mix)
[](https://book.cakephp.org/5/en/index.html)
Provides integration with your [CakePHP application](https://cakephp.org/) & [Laravel Mix](https://laravel-mix.com).
This branch works with **CakePHP 5.0+**, see [version map](#version-map) for more details.
## ❤️ Support The Development
**Do you like this project? Support it by donating:**
**or** [Paypal me](https://paypal.me/IshanVyas?locale.x=en_GB)
**or** [](https://www.codementor.io/@isvyas?refer=badge)
### Follow me
- [GitHub](https://github.com/ishanvyas22)
- [Instagram](https://www.instagram.com/ishancodes)
- [LinkedIn](https://www.linkedin.com/in/ishan-vyas-314111112)
- [Twitter](https://twitter.com/ishanvyas22)
## Installation
1. Install the AssetMix plugin with composer:
Via [composer](https://packagist.org/packages/ishanvyas22/asset-mix):
```bash
composer require ishanvyas22/asset-mix
```
2. Load plugin using below command:
```bash
bin/cake plugin load AssetMix
```
3. [Generate basic Javascript, CSS & Sass scaffolding](#generate-command):
```bash
bin/cake asset_mix generate
```
**Note:** Above command will generate scaffolding for vue, but you can generate [Bootstrap/jQuery](#generate-basic-bootstrapjquery-scaffolding), [React](#generate-react-scaffolding) or [Inertia](#generate-scaffolding-for-inertiajs) scaffolding too.
4. Install frontend dependencies
- Using [npm](https://www.npmjs.com/):
```bash
npm install
```
or
- Using [yarn](https://yarnpkg.com/):
```bash
yarn install
```
5. [Compile your assets](https://laravel-mix.com/docs/4.0/workflow#step-4-compilation)
- For development:
```bash
npm run dev
```
- To watch changes:
```bash
npm run watch
```
- For production:
```bash
npm run prod
```
6. Load `AssetMix` helper from the plugin into your `AppView.php` file:
```php
$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):
```php
echo $this->AssetMix->script('app');
```
Above code will render:
```html
```
As you can see it works same as [HtmlHelper](https://book.cakephp.org/3.0/en/views/helpers/html.html#linking-to-javascript-files). There is not need to provide full path or even file extension.
- To generate style tag for compiled css file(s):
```php
echo $this->AssetMix->css('main');
```
Output:
```html
```
If [versioning](https://laravel-mix.com/docs/4.0/versioning) is enabled, output will look something like below:
```html
```
## Generate command
The generate command is used to generate starter code for your Javascript application to get you started developing your frontend.
Get help:
```bash
bin/cake asset_mix -h
```
Generate default scaffolding (with vue):
```bash
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:
```bash
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:
```bash
bin/cake asset_mix generate bootstrap
```
#### Generate React scaffolding:
```bash
bin/cake asset_mix generate react
```
#### Generate scaffolding for [Inertia.js](https://inertiajs.com/):
```bash
# 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:
```bash
bin/cake asset_mix generate react --dir=resources
```
## Serving CakePHP out of a Subdirectory
Please see [docs/ServingFromSubdirectory](docs/ServingFromSudirectory.md)
## Version map
AssetMix version | Branch | CakePHP version | PHP minimum version |
--- | --- | --- | --- |
2.x | cake5 | >=5.0.0 | >=8.1 |
1.x | cake4 | >=4.0.0 | >=7.2 |
0.x | cake3 | >=3.5.0 | >=5.6 |
## Changelog
Please see [CHANGELOG](CHANGELOG-2.x.md) for more information about recent changes.
## Reference
To see this plugin into action you can refer to this [project](https://github.com/ishanvyas22/cakephpvue-spa), which will provide more insight.
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.