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>
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].
- cwd: the path used by imports (default:
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
ormain
keys, or by usingindex.html
- Install the Babel Package.
- Select Tools > Developer > New Syntax.
- Paste this syntax.
- Save the file as
Lit Template (Babel).sublime-syntax
.