Gulp-mejs NPM | npm.io

gulp-mejs

Mejs plugin for gulp

Mejs -- Moduled and Embedded JavaScript templates

Install

Install with npm

npm install --save-dev gulp-mejs

Usage

var gulpMejs = require('gulp-mejs')

gulp.task('mejs', function () {
  return gulp.src('test/fixtures/*.html')
  .pipe(gulpMejs({filename: 'templates.js'}))
  .pipe(gulp.dest('test'));
})

gulp.task('render-page', function () {
  return gulp.src('test/fixtures/*.html')
  .pipe(gulpMejs.render('header', {
    title: 'test render',
    user: {name: 'zensh'}
  }))
  .pipe(gulp.dest('test'))
})

gulp.task('render-pages', function () {
  return gulp.src('test/fixtures/*.html')
  .pipe(gulpMejs.render(['header', 'user'], function (tplName) {
    switch (tplName) {
      case 'header':
        return {
          title: 'test render',
          user: {name: 'zensh'}
        }
      case 'user':
        return {
          name: 'test-man'
        }
    }
  }))
  .pipe(gulp.dest('test'))
})

options and Mejs class API: https://github.com/teambition/mejs

Demo

test/fixtures/header.html:

<p><%= it.title || 'gulp' %> module</p>
<%- include('user', it.user) %>

test/fixtures/user-list.html:

<ul>
  <% it.users.forEach(function(user) { -%>
    <li>
      <%= user.name %>
    </li>
  <% }) -%>
</ul>

test/fixtures/user.html:

<h1><%= it.name %></h1>

precompile to test/templates.js(Run it in node.js/io.js/browers):

// **Github:** https://github.com/teambition/mejs
//
// **License:** MIT
/* global module, define, window */

// Mejs is a compiled templates class, it can be run in node.js or browers

;(function (root, factory) {
  'use strict'

  if (typeof module === 'object' && module.exports) module.exports = factory()
  else if (typeof define === 'function' && define.amd) define([], factory)
  else root.Mejs = factory()
}(typeof window === 'object' ? window : this, function () {
  'use strict'

  var hasOwn = Object.prototype.hasOwnProperty
  var templates = {}
  var htmlEscapes = {
    '&': '&amp;',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
    '`': '&#96;'
  }

  function Mejs (locals) {
    this.locals = locals || {}
    this.templates = copy({}, templates, true)
  }

  Mejs.import = function (tpls) {
    copy(templates, tpls, true)
    return this
  }

  var proto = Mejs.prototype
  proto.copy = copy

  proto.render = function (tplName, data) {
    var template = this.get(tplName)
    if (typeof template !== 'function') throw new Error(tplName + ' is not found')
    return template.call(this, this.copy(data, this.locals), tplName)
  }

  proto.get = function (tplName) {
    return hasOwn.call(this.templates, tplName) ? this.templates[tplName] : null
  }

  proto.add = function (tplName, tplFn, overwrite) {
    if (!overwrite && hasOwn.call(this.templates, tplName)) throw new Error(tplName + ' exist')
    this.templates[tplName] = tplFn
    return this
  }

  proto.remove = function (tplName) {
    delete this.templates[tplName]
    return this
  }

  proto.import = function (ns, mejs, overwrite) {
    if (typeof ns !== 'string') {
      overwrite = mejs
      mejs = ns
      ns = '/'
    } else ns = ns.replace(/\/?$/, '\/')
    for (var tplName in mejs.templates) {
      if (hasOwn.call(mejs.templates, tplName)) {
        this.add(this.resolve(ns, tplName), mejs.get(tplName), overwrite)
      }
    }
    return this
  }

  proto.resolve = function (parent, current) {
    parent = this.stringify(parent)
    current = this.stringify(current).replace(/^([^\.\/])/, '\/$1')
    current = /^\//.test(current) && !/\/$/.test(parent) ?
      current : (parent.replace(/[^\/]*\.?[^\/]*$/, '').replace(/\/?$/, '\/') + current)
    current = current.replace(/\/\.?\/+/g, '\/')
    while (/\/\.\.\//.test(current)) current = current.replace(/[^\/]*\/\.\.\//g, '')
    return current.replace(/^[\.\/]*/, '')
  }

  proto.escape = function (str) {
    return this.stringify(str).replace(/[&<>"'`]/g, function (match) {
      return htmlEscapes[match]
    })
  }

  proto.stringify = function (str) {
    return str == null ? '' : String(str)
  }

  function copy (dst, src, overwrite) {
    dst = dst || {}
    for (var key in src) {
      if (hasOwn.call(src, key) && (overwrite || !hasOwn.call(dst, key))) dst[key] = src[key]
    }
    return dst
  }

  templates['header'] = function (it, __tplName) {
    var ctx = this, __output = ""
    var include = function (tplName, data) { return ctx.render(ctx.resolve(__tplName, tplName), ctx.copy(data, it)) }
    ;__output += "<p class=\"test\">";;__output += ctx.escape(it.title || 'gulp');__output += " module</p>\n";;__output += ctx.stringify(include('user', it.user));__output += "\n";
    return __output.trim()
  };

  templates['user-list'] = function (it, __tplName) {
    var ctx = this, __output = ""
    ;__output += "<ul>\n  ";;it.users.forEach(function(user) {
  ;__output += "    <li>\n      ";;__output += ctx.escape(user.name);__output += "\n    </li>\n  ";;})
  ;__output += "</ul>\n";
    return __output.trim()
  };

  templates['user'] = function (it, __tplName) {
    var ctx = this, __output = ""
    ;__output += "<h1>";;__output += ctx.escape(it.name);__output += "</h1>\n";
    return __output.trim()
  };

  return Mejs
}))