Grunt grunt-ejs-locals

Posted by On 9月 26, 2015 0 Comment

grunt-ejs-locals

grunt-ejs-locals is Grunt plugin
to create html(static) file from ejs template. There is a good example in this page.
(partial, body ….)

Easy Example

Gruntfile.js

module.exports = function(grunt) {

    grunt.initConfig({
        ejs: {
            all: {
                src: ['config.ejs'],
                cwd: 'views/',
                dest: 'dist',
                expand: true,
                ext: '.html',
                options: {
                    title : 'EJS Local',
                    name : 'Kotori'
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-ejs-locals');
};

Prepare ejs file in views(nodejs express)

<!DOCTYPE html>
<html ng-app="listApp">
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/bower/bootstrap/dist/css/bootstrap.css' />
    <script src="/bower/angular/angular.min.js"></script>
</head>
<body ng-controller="listController">
<h3><%= name %></h3>
</body>
</html>

‘name’ and ‘title’ are parameters for ejs, basically these parameters are filled in server side code

Run

grunt ejs

Generate config.html in dist/

<!DOCTYPE html>
<html ng-app="listApp">
<head>
    <title>EJS Local</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link rel='stylesheet' href='/bower/bootstrap/dist/css/bootstrap.css' />
    <script src="/bower/angular/angular.min.js"></script>
</head>
<body ng-controller="listController">
<h3>Kotori</h3>
</body>
</html>

Filled parameters and make style for html. We can use this for testing without server side codes with grunt-ejs-locals

TOPICS