Gulp ESLit

Gulp ESLit is a Gulp plugin that lets you create templates with embedded JavaScript expressions using ESLit.

<!-- some/template.html -->
<h1>${ heading }</h1>
<table>
  ${ people.map((person) => `<tr>
    <td>${ person.given }</td>
    <td>${ person.family }</td>
  </tr>`) }
</table>

ESLit templates are easy to use because they’re nothing more than web standardized ES6 Template Strings with Promise support.

gulp.task('html', () => gulp.src(
  'some/template.html'
).pipe(
  require('gulp-eslit')
).pipe(
  gulp.dest('./dist')
);

Keeps things simple.

<h1>Guest List</h1>
<table>
  <tr>
    <td>Martin</td>
    <td>Brody</td>
  </tr><tr>
    <td>Bruce</td>
    <td>Shark</td>
  </tr>
</table>

Usage

Add Gulp ESLit to your build tool.

npm install gulp-eslit --save-dev

require('gulp-eslit')(data, options);

• data: the data used by the template.
• Options
  • cwd: the path used by imports (default: process.cwd()).
  • prefixes: the file prefixes sometimes used by imports (default: [ "_" ]).
  • extensions: the file extensions sometimes used by imports (default: [ ".html", ".jsx" ]).
  • globopts: the options passed into [node-glob].

Notes:

• Paths are relative to the current file or the current working directory.
• Paths may use glob patterns or omit prefixes and extensions
• Node modules are supported, using the package template or main keys, or by using index.html

Syntax Helpers

Sublime Text

1. Install the Babel Package.
2. Select Tools > Developer > New Syntax.
3. Paste this syntax.
4. Save the file as Lit Template (Babel).sublime-syntax.