gulp-pug-hyperscript

Compiles Pug/Jade templates to Hyperscript.

About

gulp-pug-hyperscript is a gulp plugin to compile Pug/Jade templates to Hyperscript. Usable with maquette, virtual-dom, react, or any other DOM library that supports Hyperscript.

This package was created by smashing gulp-iced-coffee and virtual-jade-loader together until they fit. It uses virtual-jade to compile from Pug/Jade to Hyperscript.

Installation

npm install --save-dev gulp-pug-hyperscript

Usage

var pugHyperscript = require('gulp-pug-hyperscript');
 
gulp.task('pug', function() {
  gulp.src('./src/views/*.pug')
    .pipe(pugHyperscript().on('error', gutil.log))
    .pipe(gulp.dest('./public/'))
});

Error handling

gulp-pug-hyperscript will emit an error for cases such as invalid pug syntax. If uncaught, the error will crash gulp.

You will need to attach a listener (i.e. .on('error')) for the error event emitted by gulp-pug-hyperscript:

var pugStream = pugHyperscript({pretty: false});
 
// Attach listener
pugStream.on('error', function(err) {});

In addition, you may utilize gulp-util's logging function:

var gutil = require('gulp-util');
 
// ...
 
var pugStream = pugHyperscript();
 
// Attach listener
pugStream.on('error', gutil.log);
 

Since .on(...) returns this, you can compact it as inline code:

 
gulp.src('./src/views/*.pug')
  .pipe(pugHyperscript().on('error', gutil.log))
  // ...

Options

The options object supports the same options as virtual-jade, with three additional options:

  silent:   true
  runtime:  vjade.runtime
  class:    false
  marshallDataset: true

silent: false will dump the pre- and post-processed template to the console for debugging.

vjade.runtime defaults to var h = require('virtual-dom/h');. To use Maquette or another Hyperscript library, replace vjade.runtime string with the appropriate string of code.

class replaces className attribute with the regular class attribute. This is necessary for Maquette and some other renderers.

marshallDataset, when false, will prevent virtual-jade from turning data- * attributes into a dataset Object. This is necessary for Maquette and some other renderers.

License

MIT