# gulp-pug-job

> Wrap compiled Pug templates using Gulp and pug-runtime/wrap and bind them to an object

Latest version **0.0.2** (published 2016-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-pug-job
pnpm add gulp-pug-job
yarn add gulp-pug-job
bun add gulp-pug-job
```

## 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.0.2 |
| Published | 2016-06-17 |
| First published | 2016-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 (+2 in 1 direct dependencies) |
| Install scripts | no |
| Author | Nick Baugh |
| Maintainers | niftylettuce |
| Keywords | browser, client, client-side, compile, grunt, gulp, jade, pug, pug-runtime, runtime, wrap |

## Links

- npm: https://www.npmjs.com/package/gulp-pug-job
- Repository: https://github.com/niftylettuce/gulp-pug-job
- Issues: https://github.com/niftylettuce/gulp-pug-job/issues
- npm.io page: https://npm.io/package/gulp-pug-job

## Dependencies (4)

- [through2](https://npm.io/package/through2.md) 2.0.1
- [gulp-util](https://npm.io/package/gulp-util.md) 3.0.7
- [underscore](https://npm.io/package/underscore.md) 1.8.3
- [pug-runtime](https://npm.io/package/pug-runtime.md) ^2.0.1

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2016-06-17
- 0.0.1 — 2016-06-17

## README

# gulp-pug-job

> Wraps Pug compiled templates using `pug-runtime/wrap` from <https://github.com/pugjs/pug-runtime> and binds the template functions to a global variable, such as `window.templates`.


## Install

```bash
npm install gulp-pug-job
```


## Example Usage

This will wrap an already compiled Pug template file to a namespace on an object.

Lets say you have a pug template, something like (e.g. filename is `example.pug`):

```pug
p Hello #{foo} welcome to #{baz}
```

And you want to use this on the server-side, but fast using a pre-compiled Pug template... right?

So you will need to first add the following to your `gulpfile.js` script:

```js
var gulp = require('gulp'),
    pug = require('gulp-pug'),
    job = require('gulp-pug-job');

gulp.task('job', function () {
  return gulp.src(['src/templates/*.pug'])
    .pipe(pug({ client: true, externalRuntime: true }))
    .pipe(job({
      // default options:
      parent: 'window',
      namespace: 'templates',
      separator: '-'
    }))
    .pipe(gulp.dest('public/templates'));
```

Then, in your HTML file, require the script using camel casing for the filename of the template (in our case it's simply `example`, but if the file was named `foo-baz.pug` you would use `fooBaz`):

```html
<script src="https://raw.githubusercontent.com/pugjs/pug/1.11.0/runtime.js"></script>
<script src="/templates/example.js"></script>
<script type="text/javascript">
  var html = window.templates.example({ foo: 'bar', baz: 'beep' });
  console.log('html', html);
</script>
```

In the browser console, after running the gulp script and opening your HTML file in the browser, you will see the output:

```js
html, "<p>Hello foo welcome to beep</p>"
```


## Background

Basically it takes your compiled Pug templates such as `my-example.js`:

```js
function template(locals) {
  var buf = [];
  var pug_mixins = {};
  var pug_interp;

  buf.push("<p>Hello world</p>");
  return buf.join("");
}
```

And wraps it using `pug-runtime/wrap` so it appears as:

```js
(function (window) {
  window.templates = window.templates || {};
  window.templates.myExample = function template(locals) {
    var buf = [];
    var pug_mixins = {};
    var pug_interp;

    buf.push("<p>Hello world</p>");
    return buf.join("");
}})(window);
```

Which then, when included on your HTML file, will get loaded in the global window namespace.


## Options

`gulp-pug-job` accepts an options object with the following attributes

> #### parent _(string)_

**default:** _'window'_

The object to bind to.

> #### namespace _(string)_

**default:** _'templates'_

The namespace to bind to

> #### separator _(string)_

**default:** _'-'_

The filename separator. This will be used for converting filenames to camel case object references.

i.e with the default settings the template file my-example.js would be accessible with:

```js
window.templates.myExample(locals);
```

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