# eleventy-load-file

> Emit files to the Eleventy output directory using eleventy-load

Latest version **0.1.0** (published 2021-02-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install eleventy-load-file
pnpm add eleventy-load-file
yarn add eleventy-load-file
bun add eleventy-load-file
```

## 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.0 |
| Published | 2021-02-16 |
| First published | 2021-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Greg Ives |
| Maintainers | gregives |
| Keywords | eleventy, eleventy-load, file |

## Links

- npm: https://www.npmjs.com/package/eleventy-load-file
- Repository: https://github.com/gregives/eleventy-load-file
- Homepage: https://github.com/gregives/eleventy-load-file#readme
- Issues: https://github.com/gregives/eleventy-load-file/issues
- npm.io page: https://npm.io/package/eleventy-load-file

## Alternatives

- [unionfs](https://npm.io/package/unionfs.md) — 2.2M weekly downloads
- [path-starts-with](https://npm.io/package/path-starts-with.md) — 35.9K weekly downloads
- [redzip](https://npm.io/package/redzip.md) — 1.2K weekly downloads
- [vscode-anymatch](https://npm.io/package/vscode-anymatch.md) — 848 weekly downloads
- [@ledgerhq/coin-filecoin](https://npm.io/package/@ledgerhq/coin-filecoin.md) — 793 weekly downloads

## Recent versions

- 0.1.0 (latest) — 2021-02-16

## README

# eleventy-load-file

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]
[![Prettier][prettier-src]][prettier-href]

Emit files to the Eleventy output directory using [eleventy-load](https://github.com/gregives/eleventy-load).

## Getting Started

Firstly, you'll need to install [eleventy-load](https://github.com/gregives/eleventy-load) (if you haven't already) and eleventy-load-file. You'll probably want to use eleventy-load-file in combination with [eleventy-load-html](https://github.com/gregives/eleventy-load-html), so we'll install that as well.

```sh
npm install --save-dev eleventy-load eleventy-load-file eleventy-load-html
```

Then you can set up eleventy-load-file using a rule in your eleventy-load options.

```js
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(require("eleventy-load"), {
    rules: [
      {
        test: /\.html$/,
        loaders: [
          {
            loader: require("eleventy-load-html"),
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        loaders: [
          {
            loader: require("eleventy-load-file"),
            options: {
              name: "[name].[hash:16].[ext]",
            },
          },
        ],
      },
    ],
  });
};
```

## Options

| Name                            | Type     | Default                 | Description                                |
| ------------------------------- | -------- | ----------------------- | ------------------------------------------ |
| [**`name`**](#name)             | `String` | `"[hash].[ext]"`        | Filename template for the emitted file     |
| [**`outputPath`**](#outputpath) | `String` | `this.config.outputDir` | Path where the emitted file will be placed |
| [**`publicPath`**](#publicpath) | `String` | `"assets"`              | Public path for the emitted file           |

### `name`

Type: `String` Default: `"[hash].[ext]"`

Filename template for the emitted file which can include placeholders, see the [list of placeholders below](#placeholders).

```c
"[name].[hash:16].[ext]" // styles.c0c108d2da16f77a.css
```

### `outputPath`

Type: `String` Default: `this.config.outputDir`

Path where the emitted file will be placed. This defaults to the Eleventy project's output directory.

### `publicPath`

Type: `String` Default: `"assets"`

Public path for the emitted file within the output directory. By default, the file will be saved into an `assets` folder, so the URL returned from eleventy-load-file will resemble `/assets/styles.c0c108d2da16f77a.css`.

## Placeholders

The following placeholders are replaced in the `name` option:

- `[ext]` the extension of the resource
- `[name]` the basename of the resource
- `[hash]` or `[hash:N]` the hash of the content of the resource, length `N` defaults to 8 characters

<!-- References -->

[npm-version-src]: https://img.shields.io/npm/v/eleventy-load-file/latest.svg
[npm-version-href]: https://npmjs.com/package/eleventy-load-file
[npm-downloads-src]: https://img.shields.io/npm/dt/eleventy-load-file.svg
[npm-downloads-href]: https://npmjs.com/package/eleventy-load-file
[license-src]: https://img.shields.io/npm/l/eleventy-load-file.svg
[license-href]: https://npmjs.com/package/eleventy-load-file
[prettier-src]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg
[prettier-href]: https://github.com/prettier/prettier

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