gulp-community / gulp-pug Goto Github PK

Gulp plugin for compiling Pug templates

License: MIT License

JavaScript 100.00%

gulp-pug's Introduction

gulp-pug

Gulp plugin for compiling Pug templates. Enabling you to compile your Pug templates into HTML or JS, with support for template locals, custom Pug filters, AMD wrapping, and others.

Usage

const { src, dest } = require('gulp');
const pug = require('gulp-pug');

exports.views = () => {
  return src('./src/*.pug')
    .pipe(
      pug({
        // Your options in here.
      })
    )
    .pipe(dest('./dist'));
};

API

`pug([opts])`

opts (Object): Any options from Pug's API in addition to pug's own options.
opts.locals (Object): Locals to compile the Pug with. You can also provide locals through the data field of the file object, e.g. with gulp-data. They will be merged with opts.locals.
opts.data (Object): Same as opts.locals.
opts.client (Boolean): Compile Pug to JavaScript code.
opts.pug: A custom instance of Pug for gulp-pug to use.
opts.verbose: display name of file from stream that is being compiled.

To change opts.filename use gulp-rename before gulp-pug.

Returns a stream that compiles Vinyl files as Pug.

Also See

pug
gulp-data: Using locals in your Pug templates easier.
gulp-rename: Change opts.filename passed into Pug.
gulp-wrap-amd: Wrap your Pug in an AMD wrapper.
gulp-frontmatter-wrangler: Useful if you need YAML frontmatter at the top of your Pug file.

License

MIT

gulp-pug's People

Contributors

Stargazers

Watchers

gulp-pug's Issues

Accept locals from stream

I'm using gulp-front-matter to define some locals (page title, etc). Some code to illustrate what I'm doing (well, trying to do):

gulp.task('pages', function() {
  return gulp.src(paths.pages)
    .pipe(frontMatter({ property: 'data' }))
    .pipe(jade({ pretty: true }))
    .pipe(gulp.dest('build'))
});

Would having gulp-jade check for a locals or data property on the incoming file object and using it for the jade render be a crazy feature request?

I came up with this to see if it was feasible. If it looks sane I can put a PR together, if you'd like.

function CompileJade(file, enc, cb){
  opts.filename = file.path;
  file.path = handleExtension(file.path, opts);

  if ('data' in file) {
    opts.locals = file.data;
  }

  if ('locals' in file) {
    opts.locals = file.locals;
  }

  ...
}

How to add custom includes?

Currently I don't see a way to add custom mixins, etc.. Are there options, just undocumented?

How to use Markdown in data called through locals

Greetings,

I'd like to use Markdown in a Yaml data file but can't figure out how to do it. Seems all the relevant questions and solutions are geared towards using Jade with Express (using res.render). How can this be acheived using gulp-jade without using Express?

Here's a detailed Stack Overflow question I've posted in efforts to solve this problem.

Many thanks for insights.

Jade coverts boolean attribute to have parameter

I've been using this plugin for a while now and I've noticed that for some reason gulp jade like to change attributes which can cause lots of issues in angular and I'm sure other places.

Example 1

Ui-Router

As an example when using angulars ui-router

// In a index.html
doctype html
body
  div(ui-view)

// In a nested view from index.html
.page-content
  section(ui-view)

// Nested from .page-contents ui-view
.nested-content
   | Hello World

Would get compiled into

<!DOCTYPE html>
<body>
  <div ui-view>
    <div class='page-content'>
      <section ui-view='ui-view'>
      </section>
    </div>
  </div>
</body>

Example 2

ng-Animate

ul
  li(ng-repeat='group in groups' ng-animate-children)
    ul
      li(ng-repeat='item in group.items track by item.id')

gets compiled into

<ul>
  <li ng-repeat="group in groups" ng-animate-children="ng-animate-children">
    <ul>
      <li ng-repeat="item in group.items track by item.id">
      </li>
    </ul>
  </li>
</ul>

Both of these situations break the intended functionality of the original code, the first case being that nothing shows up from the nested ui-view and the second case being that the children li element's don't get animated.

Reading the Jade website declaring doctype html should stop boolean attributes from getting parameters. Adding doctype html to the top of the file worked, but then I have set the doctype twice in my application. Once at the first line of index and then again in a subview.

Maybe an option passed to gulp-jade to stop this from happening would be best?

Bump jade version?

Can we bump up the jade version to the latest or is there a reason why you have 1.1 - 1.3?

I want to be able to use include:coffee(bare=true) x.coffee.

Handle logs

There should be an option to suppress these https://cloudup.com/cIDvjvTcWE2

Catch errors without stopping gulp.watch

I've seen, you've got the same issue, but i still has this problem.
Could you help me, how can i repair it?

Mac OS 10.9.4
NodeJS 0.10.26
I use last version of gulp-jade

Option to compile multiple client templates into one object

Thanks for this great plugin!

I would like to have the ability to compile multiple client-side templates into one object in one file. For example, I have foo.jade and bar.jade, and if I do

gulp.src(['foo.jade', 'bar.jade'])
  .pipe(jade({ client: true })
  .pipe(gulp.dest(...));

I would like the resulting file to define an object (say JST), which has two methods foo and bar corresponding to the two templates. Then I can use the templates with JST.foo(locals) and JST.bar(locals).

grunt-contrib-jade supports this.

Thanks!

gulp-jade task never finishes?

Hi,

I'm relatively new to grunt but I am having an issue with gulp-jade task on my project.

I have livereload browser refresh working when a HTML file changes in a diet directory but when jade goes to update said file, the task begins reloading the new HTML once but then the task never finishes and therefore any new changes aren't picked up from what I can tell.

Here is my gulp file, could anyone out there help me please?

var gulp = require('gulp');
var jade = require('gulp-jade');
var plumber = require('gulp-plumber');

var EXPRESS_PORT = 1987;
var EXPRESS_ROOT = __dirname + '/dist/';
var LIVERELOAD_PORT = 35729;

function startExpress() {
    var express = require('express');
    var app = express();
    app.use(require('connect-livereload')());
    app.use(express.static(EXPRESS_ROOT));
    app.listen(EXPRESS_PORT);
}

var lr;
function startLivereload() {
    lr = require('tiny-lr')();
    lr.listen(LIVERELOAD_PORT);
}

function notifyLivereload(event) {
    var fileName = require('path').relative(EXPRESS_ROOT, event.path);
        lr.changed({
            body: {
                files: [fileName]
            }
        });
}

gulp.task('jade', function(event) {
    gulp.src('jade/documents/**/*.jade')
        .pipe(jade({pretty: true}))
        .pipe(gulp.dest('dist/'));
});

gulp.task('default', function () {
    startExpress();
    startLivereload();
    gulp.watch('jade/**/*.jade', function () {
        gulp.start('jade');
    });
    gulp.watch('dist/*.html', notifyLivereload);
});

Thanks in advance!

@jh3y

automatic extension ?

I've got a sitemap.jade and a rss.jade, and I'm forced to use gulp-rename for these two.

Can a doctype parsing be possible ?

Add filter option

Could be possible to add an option to use custom jade filters? Or expose the internal jade reference instead?

Great work, thanks!

Slow: two seconds for a single jade file??

gulp.task('html', function() {
    return gulp.src(paths.baseView)
        .pipe(jade({
            locals: {
                settings: settings,
                assets:   assets
            }
        }))
        .pipe(gulp.dest(paths.html));
});

takes two seconds. The HTML of that base view is very small.

Is that normal? Feels slow.

Locals update

Hey.
Want to update my locals data for templates, when some file is changed. Is any solution for this?

Catch errors without stopping gulp.watch ?

I'm building my project with gulp.watch, but it seems that gulp watch would quit when jade() failed.

And I failed trying to use jade().on('error', gutil.log) to catch error while gulp.watch .

Then I fixed it with a try...catch... block:

    if(file.isBuffer()){
      try {
        file.contents = new Buffer(handleCompile(String(file.contents), opts));
      } catch(e) {
        this.emit('error', new Error(e))
      }
    }

Or is there any way to solve this ? Thx.

The case when the file object doesn't have `path` property

I know it's the very, very edge case, but vinyl file object does not always have path property.

In such a case, I think gulp-jade should (1) set a temporary filename, or (2) emit an error.

AMD support

Also you don't need to use clone() anymore

Doesn't change extensions to .js

Solved, updated gulp to the most recent version.

markdown filter adds id to headings

E.g.

:markdown
  # This is a heading
  ## Another heading

renders as

<h1 id="this-is-a-heading">This is a heading</h1>
<h2 id="another-heading">Another heading</h2>

Using markdown-it

pugjs/pug#1870

Disable html minification

Possible or does jade do this as a part of the compilation process?

Is it possible compile only changed file?

gulp.task 'jade', ->
  gulp.src 'app/views/*.jade'
    .pipe gulpJade({pretty: true})
    .pipe gulp.dest('tmp/views')

this compile all files despite I change only one jade file.

Variables not working

Jade variables aren't working for me, this outputs as undefined

- var title = 'The Title' 
h1= title
h2 #{title}

This also doesn't work:

title = 'The Title' 
h1= title
h2 #{title}

running test with `npm test` issue

When I've been executing the tests for the PR #69 I've realised that running npm test the console output related with tap is

total ................................................... 0/0

Hence no test is executing; it may a problem with dev environment, but I haven't found what it may be; my work around has been executing the test scripts with node test/<<filename.js>>

markdown file to jade template

Hi! Sorry if this is a noob question.

I'm looking for a way to pass a raw markdown file to a block of a Jade template with Gulp. I've found this plugin gulp-static-site which it does what I'm looking for. But the gulp plugin list says that it's a duplicate of gulp-jade.

Well... how can I handle to do that with gulp-jade

Is it possible to compile with an external js file?

Hi,

I want to compile and use data from an array in a separate JS file.

eg something like this

people.js

var people = ['john', 'mary', 'joe'];

people.jade

- each person in people
    .name #{person}

I want to do this because in my case the data is an array of complex objects and its nice to keep it separate.

Option to Log compiled files ?

Hello,

Is there an option to output the name of the compiled files in the terminal log?

I tried passing { debug: true } but that's something completely different.

I hacked node_modules/gulp-jade/node_modules/jade/lib/jade.js, added this line in line 107

gutil.log('[gulp-jade] compiled ' + parser.filename);

And now I get the desired log entries such as:

[18:25:20] [gulp-jade] compiled /Users/antoniobrandao/WEBROOT/site/public/team.html

But this hack obviously will vanish as soon as I make any update. And the rest of the team can't get it from NPM. Making a Fork just for this wouldn't make sense either.

So is there such option ? If not, could it be soon / one day ?

Thanks

Mention the Jadeify transform.

I had a real bear of a time getting gulp-jade to work. To get the module to commonjs for use with browserify I tried,

 var jade = require('gulp-jade');
 gulp.task('jade', function() {
       gulp.src('views/client/*.jade')
       .pipe(jade({
               client: true,
       }))
       .pipe(wrap('commonjs', {require: {jade:'jade'}}))
       .pipe(gulp.dest('./build/templates/'))
});

Though this made the Javascript a commonjs module that could be included.. It still didn't work in browserify. When I used a variable in a template it threw an error complaining that Jade was undefined when it tried to resolve Jade.escape.

Anyway, I ended up using the Jadeify transform with browserify. If you're using browserify this is an all around better less-hacky idea. Perhaps we should update the docs and refer those browserify users to the Jadeify transform.

Error compiling Google Tag Manager

Hello!

I am gettin an error when compile my template.jade

i use this:

//- Google Tag Manager 
noscript
  iframe(src='//www.googletagmanager.com/ns.html?id=GTM-XXXX', height='0', width='0', style='display: none; visibility: hidden;')
script
  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXX');
//- End Google Tag Manager

and there is no way to compile.

the error is:

events.js:72
throw er; // Unhandled 'error' event
^
SyntaxError: assets/source/template/template.jade:28
26| script
27| (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':

28| new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
29| j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
30| '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
31| })(window,document,'script','dataLayer','GTM-GDBW');

Unexpected token ;
at Function ()
at assertExpression (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/lexer.js:30:3)
at Object.Lexer.attrs (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/lexer.js:668:20)
at Object.Lexer.next (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/lexer.js:923:15)
at Object.Lexer.lookahead (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/lexer.js:113:46)
at Parser.lookahead (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/parser.js:102:23)
at Parser.peek (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/parser.js:79:17)
at Parser.block (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/parser.js:703:30)
at Parser.tag (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/parser.js:816:24)
at Parser.parseTag (/Volumes/Trabajos/www/local/node_modules/gulp-jade/node_modules/jade/lib/parser.js:737:17)
sh-3.2#

anyone?

ty in advance

gulp-jade not throwing errors

It seems like errors are not being thrown when they should.

When I enter a line like this into one of my templates:
h1
This is copy in an header

My assumption is that I should be thrown an error. Here is my current code:

.pipe(jade({
compileDebug: true
}))
.on('error', function(err) {
util.log(err);
})

Thanks for the help.

extend file data with locals

The context passed to a jade template is either the locals object or the data object (opts.compile(contents, opts)(opts.locals || opts.data)). It would be better if its the combination of both.
My use case is, I use gulp-data to read a json file with the strings of my template(for translating templates) and I also use the locals object to set {dev: true}.

Please change the version of `jade` in `package.json` to allow larger ranges

Like 1.x, or >=1

As it is right now, it's meaninglessly locked to >= 1.1, < 1.2 and jade is at 1.3.x

1.0 and stability: locked

Now that we accept custom jade instances, I don't know if there are any reasons to add extra features to this. If nothing comes up before the next jade release, I will be bumping this to 1.0 and locking the API.

input pattern requires double-escaping

See there because already detailed bug report in a different jade project is up
pugjs/pug#830

Write After End Error

On the initial run the task has no problems. However, when I use gulp.watch the subsequent run of the task throws this error. I have two different tasks being watched and they seem to behave as expected with no error.

Error: write after end
    at writeAfterEnd (C:\Users\Greg Waxman\Documents\Git\stream-web\node_modules
\vinyl-map\node_modules\through2\node_modules\readable-stream\lib\_stream_writab
le.js:134:12)
    at Transform.Writable.write (C:\Users\Greg Waxman\Documents\Git\stream-web\n
ode_modules\vinyl-map\node_modules\through2\node_modules\readable-stream\lib\_st
ream_writable.js:182:5)
    at write (C:\Users\Greg Waxman\Documents\Git\stream-web\node_modules\gulp-ja
de\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:58
7:24)
    at flow (C:\Users\Greg Waxman\Documents\Git\stream-web\node_modules\gulp-jad
e\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:596
:7)
    at Transform.pipeOnReadable (C:\Users\Greg Waxman\Documents\Git\stream-web\n
ode_modules\gulp-jade\node_modules\through2\node_modules\readable-stream\lib\_st
ream_readable.js:628:5)
    at Transform.EventEmitter.emit (events.js:92:17)
    at emitReadable_ (C:\Users\Greg Waxman\Documents\Git\stream-web\node_modules
\gulp-jade\node_modules\through2\node_modules\readable-stream\lib\_stream_readab
le.js:412:10)
    at emitReadable (C:\Users\Greg Waxman\Documents\Git\stream-web\node_modules\
gulp-jade\node_modules\through2\node_modules\readable-stream\lib\_stream_readabl
e.js:408:5)
    at readableAddChunk (C:\Users\Greg Waxman\Documents\Git\stream-web\node_modu
les\gulp-jade\node_modules\through2\node_modules\readable-stream\lib\_stream_rea
dable.js:169:9)
    at Transform.Readable.push (C:\Users\Greg Waxman\Documents\Git\stream-web\no
de_modules\gulp-jade\node_modules\through2\node_modules\readable-stream\lib\_str
eam_readable.js:131:10)

convert jade to EJS

I compiled my jade files to JS by your example code and what I've got? That is some kind of 'common denominator' for all templates and than i can compile it to EJS or hogan?

Cannot attach error handler

This does not call handleError, causing gulp watch to break on every syntax error:

var gutil, handleError, jade;

gutil = require('gulp-util');
jade = require('gulp-jade');

function handleError(err) {
  gutil.log('handleError called!!!');
  this.emit('end');
};

gulp.task('build', function() {
  return gulp.src('./input/**/*.jade')
    .pipe(jade().on('error', handleError))
    .pipe(gulp.dest('./output'));
});

gulp.task('watch', function() {
  return gulp.watch(['./input/**/*'], ['build']);
});

Jade version

Why You not use latest jade version?
From dependencies:
"jade": "1.1 - 1.7"
but now available jade 1.8.2

pass locals in

For HTML compilation it is useful to pass local variables into a Jade template. How should this be handled in gulp-jade?

' or ' instead of "

Gulp Jade takes this:

div(
  class='someclass',
  style='background-image: url("http://placehold.it/768x480/222222/444444")'
)

And spits this:

<div style="background-image: url(&quot;http://placehold.it/768x480/222222/444444&quot;)" class="someclass"></div>

I think he should spit ' or ' instead of ".

Not working option pretty: '\t'

The Jade API documentation says that I can use '\t'. But it doesn't work
http://jade-lang.com/api/

My gulp task code

gulp.task('jade', function() {
    gulp.src(path.html.source)
        .pipe(jade({
            pretty: '\t',
            basedir: path.html.basedir
        }))
        .on('error', handleError)
        .pipe(gulp.dest(path.html.destination))
});

Locals that are objects cause console error

When I pass an object to my templates via locals it causes an error even though it then outputs the correct value in the rendered template.

The following code represents my gulp task: -

gulp.src(['./src/jade/**/*.jade')
    .pipe(tasks.jade({
      basedir: './src/',
      locals: {
        testA: 'hello',
        testB: {hello: 'Hello World'},
      }
      pretty: true
    })
    .pipe(./build/);

Then in my template I am calling

p #{testA}
p #{testB.hello}

The output is: -

<p>Hello</p>
<p>Hello World</p>

However the console shows the error: "Cannot read property 'hello' of undefined". I am wondering if this is related to this change that was made to the Jade globals system.

pugjs/pug@c387367

Any and all help appreciated.

Prevent jade from output includes

I haven't found any info about this : my includes are outputted as separate files (but they work, so this isn't a real issue, just disturbing).
But isn't there any mean to just have the includes compiled into the files they're a part from ?

Adding support for function-typed locals data?

Ref: pugjs/pug#1497 (comment)

In grunt, we could provide a function like function (dest, src) {}
And I think in gulp, we can support one like function (file) {}
Thanks.

gulp.task('jade', function(){
  gulp.src('xx')
  .pipe(jade({
    data: function(file){
      return {
        name: path.basename(file.path)
      }
    }
   }))
  .pipe(gulp.dest('xx'))
})

HTML Compilation Error

When following up an HTML element with plain text, the text fails to be contained within its parent element, which instead gets closed and then re-opened after its children. This error does not reproduce on the demo page for the Jade language, so I suspect that the issue could be fixed by a simple compiler upgrade.

source:

p
    figure
        img(src='#', alt='')
        figcaption image caption text
    | This text and the element before it does not get wrapped by the paragraph element.

result:

<p></p>
<figure><img src="#" alt="">
    <figcaption>image caption text</figcaption>
</figure>
This text and the element before it does not get wrapped by the paragraph element.
<p></p>

gulp-jade quits without finishing task?

I have the following gulp task:

gulp.task('jade', function(done) {
  gulp.src(paths.jade)
    .pipe(data(function(){}))
    .pipe(jade())
    .pipe(gulp.dest('./www/templated/'))
    .on('end', done);
});

Which is trying to compile this jade file:

#{anything}

But when I try to run the task, the jade task quits without finishing:

$ gulp jade
[14:39:24] Using gulpfile ~/path/gulpfile.js
[14:39:24] Starting 'jade'...

$

Apologies in advance if I've missed something obvious here. I can't tell if this is a gulp-jade issue, or quite what I am doing wrong. It looks as if there is surpressed error.

Change the file extension

file.shortened and file.path both need to have their file extensions modified from .jade to .js before passing it along to a .folder()

Client single file?

Is there any way I can compile all my .jade templates as {client:true} into a single file with different function names?
So far I got them compiled into a single file using concat, but they all output as template().

gulp.src("templates/*/.jade")
.pipe(jade({client: true}))
.on('error', console.log)
.pipe(concat("templates.js"))
.pipe(gulp.dest("../website/js"))

turns into

function template(locals) {
var buf = [];
var jade_mixins = {};

buf.push("<div class="test">");;return buf.join("");
}
function template(locals) {
var buf = [];
var jade_mixins = {};

buf.push("<div class="anotherTest">");;return buf.join("");
}

Better error logging?

I must admit I am unsure if this is something you can effect or is a problem with jade.

But I currently have the simplest of jade files

Jade File

.header jamie

Gulp task

gulp.task('jade', function () {
    return gulp.src('./frontend/views/**/*.jade')
        .on('error', handleErrors)
        .pipe(jade({
            client: true
        }))
        .pipe(gulp.dest('frontend/js/jade'));
});

Error

[23:50:27] gulp-notify: [Compile Error] Unexpected token

Compiled Jade

function template(locals) {
var buf = [];
var jade_mixins = {};
var jade_interp;

buf.push("<div class=\"header\">jamie</div>");;return buf.join("");
}

The funny thing is, first running this task it compiles, hence the above compiled. But it still gives the error. Then when changing the file it won't compile with the same error Unexpected token

Would it be possible to have more information about the kind of error?

gulp-jade task is taking much longer than it displays

I can't really tell if this is a jade issue or a gulp-jade issue, so I figured I'd start here.

when I run $ gulp jade, it says my jade task finishes after 7.8ms! Super fast! And you know, when I'm only changing one file, that's accurate. However, when I run the entire jade task, the process keeps running for about 7-8 seconds after it told me the task had finished. I am using includes and extends, which I'm sure slows it down, but (a) that seems like a long time to compile only about 30 templates or so, and (b) why doesn't the process stop after the task is complete?

relevant code, pretty straightfoward:

gulp.task('jade', function() {
  gulp.src(sources.jade)
    .pipe(gulpif(dev(), plumber()))
    .pipe(jade())
    .pipe(gulp.dest('./dist/'));

do you have any insight into this? Is it on the gulp-jade wrapper side or with jade itself?

Thank you!!

gulp-jade is not working

I've just updated gulp-jade after your last commit and it's not working.
I've got index.jade, with some code and several includes. Task works without errors, but index.html is empty.
I've tried it on Mac, on Windows and Ubuntu 12.04. Result is the same always.
I think, there is a problem with jade 1.5, cause gulp-jade version 1.3 works correctly.