gulp-ejs-monster
Gulp plugin for ejs. The project is inspired by ejs-locals
Disclaimer v0.1.0
This is an open test version,
No guarantee of correct operation
You can use it at your own risk.
usage example
const gulp = require('gulp');
const lodash = require('lodash');
const ejsMonster = require('gulp-ejs-monster');
const isWatching = true;
const watchAndTouch = require('gulp-watch-and-touch');
const fileWatcher = watchAndTouch(gulp);
const isProduction = true;
const jsBeautify = require('js-beautify');
const ejsData = {
NODE_MODULES: {
_: lodash
},
PROJECT_STATS: {
version: '1.0.0'
}
};
const ejsOptions = {
ext: '.html',
layouts: './src/ejs/layouts',
partials: './src/ejs/partials',
configs: './src/ejs/configs',
controllers: './src/ejs/controllers',
reservedLocalsKeys: [
'NODE_MODULES',
'PROJECT_STATS'
],
afterRender: function(markup, file, data) {
if (isWatching) {
let filePath = file.path;
let sources = data.__INSTANCE.SOURCES.files[filePath] || [];
fileWatcher(filePath, filePath, sources);
}
if (__ARGS.flags.production) {
let beautyMarkup = jsBeautify.html(markup, {
indent_level: 0,
eol: '\n',
max_preserve_newlines: 1,
});
return beautyMarkup;
}
}
};
gulp.task('ejs', function(done) {
return gulp.src('./src/ejs/*.ejs')
.pipe(ejsMonster(ejsData, ejsOptions))
})
markup
base.ejs layout
<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<title>blocks</title>
</head>
<body>
<div class="wrapper">
<%- blocks.header %>
<div class="container">
<%- blocks.breadcrumbs %>
<%- body -%>
</div>
<%- blocks.footer %>
</div>
</body>
</html>
index.ejs view
<%
layout('base');
importController('utils.js');
importConfig('main-menu.js');
locals.View = {
title: 'Главная страница',
};
block('header', partial('structure/header', {
title: View.title
}));
block('footer', partial('structure/footer'));
-%>
<h1>Hello world!</h1>
<%- partial('widgets/features') %>
<%- partial('widgets/discounts') %>
<%- partial('widgets/special-offers') %>
<%- partial('widgets/popular-services') %>
<%- partial('widgets/promotions') %>
<%- partial('widgets/reviews') %>
header.ejs partial
<%
let {
title = 'default header title',
subTitle = 'default header subtitle'
} = ENTRY;
-%>
<header>
<div class="center">
<h2 class="title"><%- title %></h2>
<div class="subtitle"><%- subtitle %></div>
</div>
</header>