# Working With Scripts

Elixir also provides several functions to help you work with your JavaScript files, such as compiling future versions of JavaScript, using module bundlers, minification, and simply concatenating plain JavaScript files:

* `scripts`
* `scriptsIn`
* `webpack`
* `browserify`
* `rollup`

> **Tip**: Please remember you can use any valid [file globbing](https://github.com/isaacs/node-glob) pattern as well.

## Babel

> **Deprecation**: `mix.babel()` has been deprecated in ColdBox Elixir 2.0.0 in favor of using one of the module bundlers ([`browserify`](https://github.com/coldbox-elixir/extension-browserify), [`rollup`](https://github.com/coldbox-elixir/extension-rollup) or [`webpack`](https://github.com/coldbox-elixir/extension-webpack))

## Combining Compiled Scripts

If you have multiple JavaScript files (non babelified) that you would like to combine into a single file, you may use the `scripts` method.

The `scripts` method assumes all paths are relative to the `resources/assets/js` directory, and will place the resulting JavaScript in `includes/js/all.js` by default:

```javascript
elixir( function( mix ){
    mix.scripts( [
        'jquery.js',
        'app.js'
    ] );
} );
```

If you need to combine multiple sets of scripts into different files, you may make multiple calls to the `scripts` method. The second argument given to the method determines the resulting file name for each concatenation. You can also use the third optional argument to override the base directory of `resources/assets/js`

```
elixir( function( mix ){
    mix.scripts( ['app.js', 'controllers.js' ], 'public/js/app.js' )
       .scripts( ['forum.js', 'threads.js' ], 'public/js/forum.js' );
});
```

If you need to combine all of the scripts in a given directory, you may use the `scriptsIn` method or globbing patterns. The resulting JavaScript will be placed in `includes/js/all.js`:

```javascript
elixir( function( mix ){
    mix.scriptsIn( 'resources/js/some/directory' );
} );
```

## Combining Scripts

If you have multiple JavaScript files that you would like to combine into a single file, you may use the `combine` method. Please note that the `combine` method does NOT do any type of compilation or minification. It is a plain 'ole combination or concatenation of files.

The method assumes the starting place of all paths from the `root` of your application, so not the `resources` folder. The first argument is a single location or an array of locations, the second argument is the output combo file.

```javascript
elixir( function( mix ){
    mix.combine( 
        [
            'resources/assets/vendor/jquery.js',
            'resources/assets/vendor/app.js',
        ],
        "includes/js/combined.js"
    );

    mix.combine( 
        [
            'resources/assets/vendor/*.js'
        ],
        "includes/js/combined.js"
    );
} );
```

## Module Bundlers

There is official support for three module bundlers:

* [Browserify](https://github.com/coldbox-elixir/extension-browserify)
* [Rollup](https://github.com/coldbox-elixir/extension-rollup)
* [Webpack](https://github.com/coldbox-elixir/extension-webpack)

See each individual repository for their specific API.

## Browserify

Elixir ships with a [browserify](http://browserify.org/) method, which gives you all the benefits of requiring modules in the browser and using [ECMAScript 6](https://babeljs.io/docs/learn-es2015/) and [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html).

This task assumes that your scripts are stored in `resources/assets/js` and will place the resulting file in `includes/js/main.js`. You may pass a custom output location as an optional second argument and an optional third argument to override the base directory of `resources/assets/js`:

```
elixir( function( mix ){

 mix.browserify( 'main.js' );

} );



// Specifying a specific output filename...

elixir( function( mix ){

 mix.browserify( 'main.js', 'includes/javascripts/main.js' );

} );



// Specifying a specific output filename + basedir

elixir( function( mix ){

 mix.browserify( 'main.js', 'includes/javascripts/main.js', 'public/js' );

} );
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://coldbox-elixir.ortusbooks.com/v2/working_with_scripts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.