Home

Awesome

Adonis Mix Asset

Laravel Mix for Asset Bundler on AdonisJS

npm-image license-image typescript-image

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!

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

Table of contents

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

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-mix

Setup

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.

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:build

Build assets and watch for file changes :

node ace mix:watch

Build assets for production :

node ace mix:build --production

Additional Information

Gitignore

Add this to your .gitignore file :

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 :

public/scripts
public/styles

Analyze Assets Size

If you want to analyze all of your asset sizes for production. Run this command :

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.

Analyzer preview : webpack bundle analyzer zoomable treemap 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 --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 :

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 :

{
  "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": ["./"]
}