How to set up Panini for different environments

Panini is a super simple flat file generator for use with Gulp. It compiles a series of HTML pages using a common layout. These pages can also include HTML partials, external Handlebars helpers, or external data as JSON or YAML.

Consider the case you code a Gulp build process with different environments for development and production. Then in your Panini templates you’ll also have the possibility to create conditionals which depends on the stage you are working in.

For instance to use minified files in your production environment. In your template you’ll need something like that shown below:

<link rel="stylesheet" href="{{root}}css/app{{#if production}}.min{{/if}}.css">

The above does not work, because of Panini uses the Handlebars helpers. The default #if helper of Handlebars does not support conditional comparisons. You should create your own helper and save it in the helpers folder:

module.exports = function(a, options) {
if (a === true) {
options.fn(this)
} else {
options.inverse(this);
}
}

Save the file with the name “iftrue.js” in the helpers folder, to make {{iftrue}} avaible in your templates. After adding the helper you can use:

<link rel="stylesheet" href="{{root}}css/app{{#iftrue production}}.min{{/iftrue}}.css">

The only thing left to do now is set the “production” variable itself. The gulp-environments plugin makes it convenient to create separate environments, such as development and production, to run your tasks in. You can install this plugin now by running the following command:

npm install --save-dev gulp-environments

Now you can create the following tasks:

gulp.task('set-development', development.task);
gulp.task('set-production', production.task);
gulp.task('default', ['set-development','compile-html']);
gulp.task('deploy', ['set-production','compile-html']);

Then your compile-html task may look like that shown beneath:

gulp.task('compile-html', function(cb) {
gulp.src('html/pages/**/*.html')
.pipe(panini({
root: 'html/pages/',
layouts: 'html/layouts/',
partials: 'html/includes/',
helpers: 'html/helpers/',
data: development() ? 'html/data/development' : 'html/data/production'
}))
.pipe(gulp.dest('_site'));
cb();
});

Both the html/data/development and html/data/production directories should contain a production.json file. The production.json production.json in the html/data/production directory contains only true and the one in the html/data/development directory contains only false.

That’s all!