# grunt-jsloader

> Set up your project for asynchronous script loading

Latest version **0.1.4** (published 2014-06-10) · 0 weekly downloads

## Install

```sh
npm install grunt-jsloader
pnpm add grunt-jsloader
yarn add grunt-jsloader
bun add grunt-jsloader
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2014-06-10 |
| First published | 2014-06-09 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.8.0 |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Mike Calvanese |
| Maintainers | mfcalvanese |
| Keywords | grunt, gruntplugin, scriptjs, asynchronous, $script |

## Links

- npm: https://www.npmjs.com/package/grunt-jsloader
- Repository: https://github.com/mikec/grunt-jsloader
- Issues: https://github.com/mikec/grunt-jsloader/issues
- npm.io page: https://npm.io/package/grunt-jsloader

## Dependencies (1)

- [grunt](https://npm.io/package/grunt.md) ~0.4

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads

## Recent versions

- 0.1.4 (latest) — 2014-06-10
- 0.1.3 — 2014-06-10
- 0.1.2 — 2014-06-10
- 0.1.1 — 2014-06-09
- 0.1.0 — 2014-06-09

## README

grunt-jsloader
==============

Set up your project for asynchronous script loading

Installation
------------

Install grunt-jsloader using npm:

```
$ npm install grunt-jsloader
```

Then add this line to your project's *Gruntfile.js*:

```javascript
grunt.loadNpmTasks('grunt-jsloader');
```

How to use it
-------------

grunt-jsloader prepares your script files to be loaded asynchronously using [script.js](https://github.com/ded/script.js/).

Configure the grunt task:

```
jsloader: {
    example: {

        // main file where $script will be used to load all other files.
        // this can be any type of file, but will usually be a .js or .html
        main: 'main.js',

        // a map of all scripts and their dependencies
        scripts: {

            // scripts without any dependencies.
            foo: 'foo.js',
            bar: 'bar.js',

            // a script with dependencies
            baz: {
                src: 'bar.js',
                dep: ['foo', 'bar']
            }
        }
    }
}
```

In your main file, include the following placeholder:
```
    /* jsloader */
        // code to run when all dependencies are loaded
        runMyApp();
    /* end jsloader */
```

You will need to add a reference to [script.js](https://github.com/ded/script.js/) to your project. Make sure that it's loaded before the spot where the `/* jsloader */` placeholder code will be included.

More Configuration
------------------

Scripts can be configured using a string for a single script, or an array for multiple scripts.

```
scripts: {
    foo: 'foo.js'
}

// or

scripts: {
    stuff: ['foo.js', 'bar.js']
}
```

`*` can be used in the `dep` property to include all other script groups as dependencies of this script group

```
scripts: {
    foo: 'foo.js',
    bar: 'bar.js',

    // baz depends on foo and bar
    baz: {
        src: 'baz.js',
        dep: '*'
    }
}
```

Options
-------

`basePath`

Sets the base path of you project. If used, all script src paths should be relative to the basePath.

```
// the grunt task will look for files in app, such as "app/foo.js"

// main.js, foo.js, and bar.js should be in the base path
// so relative script references will be used ("foo.js" and "bar.js")

jsloader: {
    example: {
        options: {
            basePath: 'app'
        }
        main: 'main.js',
        scripts: {
            foo: 'foo.js',
            bar: 'bar.js'
        }
    }
}
```

Testing
-------

```
$ cd grunt-jsloader
$ npm test
```

---
_Source: https://npm.io/package/grunt-jsloader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._