als-mix

About

als-mix is the class that containes instruments for compiling few js or css files to one. The compiling process containes:

1. Concatenating source files to one file
2. Including the concatenated js code inside (function{code})() - the code not available from console
3. Compiling the js code with Babel to es5
4. Minifying the code as option

The main idea took from Laravel-mix with some differences. One of the main differences is that the source codes inside mixed js files are in the same scope and not inside separated functions. Acording to that, on one hand, you won't be able to use same variables and function names. But on the other hand, it will allow integration between different files inside one mixed file. Another difference, is about using cdn or online files as part of mix.

--

Install

npm i als-mix

--

Step 1: Define the mix

You need to define the mix object and mix files before use.

Mix is a class and it's constructor gets three parameters:

1. jsPath - the output folder for JavaScript files
2. cssPath - the output folder for css files
3. downloads - the output folder for downloaded files

The syntax: new Mix(jsPath,cssPath,downloads)

Here the example code:

// ./resources/mix.js
const Mix = require('als-mix')
const path = require('path')

let jsPath = path.join(__dirname,'..','public','js')
let cssPath = path.join(__dirname,'..','public','css')
let downloads = path.join(__dirname,'downloads')
let mix = new Mix(jsPath,cssPath,downloads)

--

Step 2: Define the mix files

You can define how many mix files you want.

To define each file insert fileName:[files] to mix.js or mix.css. Here how it looks like:

{
    mixFileName:[
        pathToFile,
        link,
        PathToFolder
    ]
}

mixFileName - is the name of mix file will be created in mixFolder you defined before. Dont write extension to mix file name.

Each file inside array can be:

1. Path to file - for example: path.join(__dirname,'someFolder','someFile.js')
2. Path to folder - regular path as path to file. But in this case, all css or js files in the folder's path will be included in the mix.
3. Link or cdn - direct link to js or css file. The file has to be downloaded before (with cli command - further)

Here the example:

// ./resources/mix.js

mix.js = {
    mainMix: [
        path.join(__dirname,'..','folder'),
        path.join(__dirname,'..','resources','some.js'),
        'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js'
    ],
    mainMix2: {
        ...
    }
}

mix.css = {
    mainMix: [
        path.join(__dirname,'..','folder'),
        path.join(__dirname,'..','resources','some.css'),
        'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'
    ]
}

--

Step 3: run and use cli

Run mix.cli() and you will be able to use the folowing command lines commands.

1. node mix download - downloading files from all links in mixes to download path (defined on constructor)
   • The command runs mix.download() method
2. node mix mix - compiling and build the mix files in jsPath and cssPath
   • The command runs mix.mix() method
3. node mix watch - wathcing for changes in source files and compiling the mix
   • The command runs mix.watch() method
4. node mix minify - minifying the mix files
   • The command runs mix.minify() method

--

Full Code example

// ./resources/mix.js
const Mix = require('als-mix')
const path = require('path')

let jsPath = path.join(__dirname,'..','public','js')
let cssPath = path.join(__dirname,'..','public','css')
let downloads = path.join(__dirname,'downloads')
let mix = new Mix(jsPath,cssPath,downloads)


mix.js = {
    mainMix: [
        path.join(__dirname,'..','folder'),
        path.join(__dirname,'..','resources','some.js'),
        'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js'
    ]
}

mix.css = {
    mainMix: [
        path.join(__dirname,'..','folder'),
        path.join(__dirname,'..','resources','some.css'),
        'https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'
    ]
}

mix.cli()

In console inside ./resource folder

> node mix download
> node mix mix
> node mix watch
> node mix minify

Plugins to Babel

als-mix using Babel to convert the code to es5. In some cases, you will get messages to install some plugins to Babel.

I meet demand to plugin-proposal-class-properties in case of static methods inside class. In this case, install the plugin:

npm install --save-dev @babel/plugin-proposal-class-properties

Create file babel.config.json in project root folder with folowing:

{
    "plugins": ["@babel/plugin-proposal-class-properties"]
}