https://github.com/ladjs/gulp-pug-job
Wrap compiled Pug templates using Gulp and pug-runtime/wrap
https://github.com/ladjs/gulp-pug-job
Last synced: 12 months ago
JSON representation
Wrap compiled Pug templates using Gulp and pug-runtime/wrap
- Host: GitHub
- URL: https://github.com/ladjs/gulp-pug-job
- Owner: ladjs
- License: mit
- Created: 2016-06-17T00:22:39.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2024-02-02T16:49:32.000Z (over 2 years ago)
- Last Synced: 2025-06-24T03:18:17.438Z (12 months ago)
- Language: JavaScript
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
# gulp-pug-job
> Wraps Pug compiled templates using `pug-runtime/wrap` from 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
var html = window.templates.example({ foo: 'bar', baz: 'beep' });
console.log('html', html);
```
In the browser console, after running the gulp script and opening your HTML file in the browser, you will see the output:
```js
html, "
Hello foo welcome to beep
"
```
## 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("
Hello world
");
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("
Hello world
");
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);
```