adonis-mix-asset v3.0.0
Adonis Mix Asset
Laravel Mix for Asset Bundler on AdonisJS
Adonis Mix Asset is an assets bundler based on Laravel Mix for AdonisJS application.
Laravel Mix is an awesome assets bundler and easy to use!
Table of contents
Getting Started
Installation
npm i adonis-mix-asset && npm i --save-dev laravel-mix
# or if using Yarn
yarn add adonis-mix-asset && yarn add --dev laravel-mixSetup
node ace configure adonis-mix-assetIt 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.
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.
View Helper
Use mix view helper to generate assets url. Example :
...
<head>
<link rel="stylesheet" href="{{ mix('styles/app.css') }}" />
<script src="{{ mix('scripts/app.js') }}"></script>
</head>
...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 :
node ace mix:buildBuild assets and watch for file changes :
node ace mix:watchBuild assets for production :
node ace mix:build --productionAdditional Information
Gitignore
Add this to your .gitignore file :
mix-manifest.jsonAlso, 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 :
public/scripts
public/stylesAnalyze Assets Size
If you want to analyze all of your asset sizes for production. Run this command :
node ace mix:build --analyze --productionIt 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.
Analyzer preview :
Source : webpack-bundle-analyzer documentation.
Enable Hot Module Replacement (HMR) / Hot Reloading
First, read Laravel Mix instructions about HMR.
Run this command to enable HMR :
node ace mix:watch --hotUse 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 :
node ace mix:build --mix-config prod/webpack.mix.js
node ace mix:watch --mix-config prod/webpack.mix.jsTips 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 :
{
"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": ["./"]
}