Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wahyubucil/adonis-mix-asset
Laravel Mix for Asset Bundler on AdonisJS
https://github.com/wahyubucil/adonis-mix-asset
adonisjs laravel-mix
Last synced: 3 months ago
JSON representation
Laravel Mix for Asset Bundler on AdonisJS
- Host: GitHub
- URL: https://github.com/wahyubucil/adonis-mix-asset
- Owner: wahyubucil
- License: mit
- Created: 2020-10-04T16:02:37.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-18T09:00:29.000Z (over 3 years ago)
- Last Synced: 2024-07-10T12:06:57.215Z (4 months ago)
- Topics: adonisjs, laravel-mix
- Language: TypeScript
- Homepage:
- Size: 3.1 MB
- Stars: 34
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-adonisjs - Adonis Mix Asset - Adonis Mix Asset is an assets bundler based on Laravel Mix for AdonisJS application (Packages)
README
# Adonis Mix Asset
> Laravel Mix for Asset Bundler on AdonisJS
[![npm-image]][npm-url] [![license-image]][license-url] [![typescript-image]][typescript-url]
Adonis Mix Asset is an assets bundler based on [Laravel Mix](https://laravel-mix.com) for AdonisJS application.
[Laravel Mix](https://laravel-mix.com) is an awesome assets bundler and easy to use!
## Table of contents
- [Getting Started](#getting-started)
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
- [Example Configuration](#example-configuration)
- [View Helper](#view-helper)
- [Compile Assets](#compile-assets)
- [Additional Information](#additional-information)
- [Gitignore](#gitignore)
- [Analyze Assets Size](#analyze-assets-size)
- [Enable Hot Module Replacement (HMR) / Hot Reloading](#enable-hot-module-replacement-hmr--hot-reloading)
- [Use Another Mix Configuration](#use-another-mix-configuration)
- [Tips on Using Typescript Asset](#tips-on-using-typescript-asset)
## Getting Started
### Installation
```bash
npm i adonis-mix-asset && npm i --save-dev laravel-mix
# or if using Yarn
yarn add adonis-mix-asset && yarn add --dev laravel-mix
```
### Setup
```bash
node ace configure adonis-mix-asset
```
It will install the provider, command, and copy `webpack.mix.js` configuration file to the project's root folder.
## Usage
### Example Configuration
The configuration file is on `webpack.mix.js`.
```js
const mix = require('laravel-mix')
/**
* By default, AdonisJS public path for static assets is on the `./public` directory.
*
* If you want to change Laravel Mix public path, change the AdonisJS public path config first!
* See: https://docs.adonisjs.com/guides/static-assets#the-default-directory
*/
mix.setPublicPath('public')
// Add your assets here
mix
.js('resources/assets/scripts/app.js', 'scripts')
.sass('resources/assets/styles/app.scss', 'styles')
```
For more information on Laravel Mix features. See [Laravel Mix Documentation](https://laravel-mix.com/docs).
### View Helper
Use `mix` view helper to generate assets url. Example :
```handlebars
...
...
```
The view helper parses `mix-manifest.json` to generate assets url.
### Compile Assets
Make sure before you run the command, you already configuring the `webpack.mix.js` file, and run `node ace serve` or `node ace build`.
Build assets :
```bash
node ace mix:build
```
Build assets and watch for file changes :
```bash
node ace mix:watch
```
Build assets for production :
```bash
node ace mix:build --production
```
## Additional Information
### Gitignore
Add this to your `.gitignore` file :
```.gitignore
mix-manifest.json
```
Also, for example if you want to output your scripts on `public/scripts` and styles on `public/styles`, you need to add all of those folders to your `.gitignore` file. Example :
```.gitignore
public/scripts
public/styles
```
### Analyze Assets Size
If you want to analyze all of your asset sizes for production. Run this command :
```bash
node ace mix:build --analyze --production
```
It will open your browser automatically and show an interactive treemap visualization of the contents of all your assets.
If the browser doesn't open automatically. You can open it on [127.0.0.1:8888](http://127.0.0.1:8888).
Analyzer preview :
Source : [webpack-bundle-analyzer documentation](https://github.com/webpack-contrib/webpack-bundle-analyzer#readme).
### Enable Hot Module Replacement (HMR) / Hot Reloading
First, read [Laravel Mix instructions](https://laravel-mix.com/docs/hot-module-replacement) about HMR.
Run this command to enable HMR :
```bash
node ace mix:watch --hot
```
### Use Another Mix Configuration
If you want to use another Mix configuration, you can use `--mix-config` option either on `mix:build` or `mix:watch`. Example :
```bash
node ace mix:build --mix-config prod/webpack.mix.js
node ace mix:watch --mix-config prod/webpack.mix.js
```
### Tips on Using Typescript Asset
If you're planning to use Typescript asset for your Front-End, here are some tips to get started.
For example if you want to put your scripts on `resources/assets/scripts`, then you need to create `tsconfig.json` in those folder. That way, it will prevent conflict between your Front-End script and Back-End script.
Here's an example `tsconfig.json` you can use :
```json
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"noUnusedLocals": true,
"incremental": true,
"noUnusedParameters": true,
"declaration": false,
"strictNullChecks": true
},
"include": ["./"]
}
```
[typescript-image]: https://img.shields.io/badge/Typescript-294E80.svg?style=for-the-badge&logo=typescript
[typescript-url]: "typescript"
[npm-image]: https://img.shields.io/npm/v/adonis-mix-asset.svg?style=for-the-badge&logo=npm
[npm-url]: https://npmjs.org/package/adonis-mix-asset "npm"
[license-image]: https://img.shields.io/npm/l/adonis-mix-asset?color=blueviolet&style=for-the-badge
[license-url]: LICENSE.md "license"