❤
npm
Sign UpSign In

gulp-nekyll

0.0.2 • Public • Published

Gulp-Nekyll

Plugin for gulp to support jekyll-like streaming

Gulp plugin for static site generators. This is not done yet

This was inspired by the google web-app starter kit, my fork of which is the flagship for this. When I was using web starter kit I thought it was awesomely cool, but annoying that while going forward in static development, we took a step back too. I wanted to add precompiled template support.

So, I tried my hand at it and this is the result. Not sure if it will go anywhere.

var nekyll = require('gulp-nekyll');
 
// Create Templates From Directory
gulp.task('templates', ['templates:process'], function () {
  return nekyll.build()
    .pipe(gulp.dest('app/'));
});
 
gulp.task('templates:process', function () {
  return gulp.src(['app/templates/**/*.html'])
    .pipe(nekyll.all({
      layoutsDir: '_layouts',
      partialsDir: '_includes',
      postsDir: '_posts'
    }))
    .on('error', console.error.bind(console))
})
 
...
 
// Watch Files For Changes & Reload
gulp.task('serve', ['styles:components', 'styles:scss'], function () {
 
  gulp.watch(['app/templates/**/*.html'], ['templates', reload]); // <--- Here it is!
  
});
 

Now whenever we serve our gulp content, it will watch for template changes compile them into their individual files. Neat!

Benefits of the plugin

Hogan.js backbone

You get all of the benefits of Hogan.js and then some! The plugin supports partials, layouts, posts, and pages.

Layouts

Use layouts to organize your partials and wrap them in ugly tags, like <html>, <head>, and <body>

Partials

Partials are reusable segments of beauty. Don't type that nav in more than once! Just make a partial for it!

Posts

Posts are markdown-parsed page content. They have special header information enclosed in some clever Hogan comments, and are then compiled into their own files and saved into a special object. This object can be iterated through to display posts on one of your pages.

Pages

Pages are... well... pages? They are inserted into a {{{yield}}} on the layout to finalize the page.

Config

Hate retyping something like an email address or phone number? No problem. Configuration files are loaded and inserted into your templates, as well as some other useful information like today's date, and you can access them like any other mustache variable. The configuration is loaded in _config.json which resides in the root directory.

Examples

layout.html

<!doctype html>
<html lang="">
 
 {{> head}}
 
 <body>
 
   {{{ yield }}}
 
 </body>
</html>

head.html

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Static Site</title>
 
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild -->
</head>

And finally

index.html

<h1>Hello World!</h1>
<small>Date Modified: {{formatDate date 'mm-dd-yyy'}}</small>

And then you have a file page! Now whenyou want to add new ones, you only need to worry about the specific content that makes it unique. You also get some handlebar helpers to make your content even more snazzy!

I hope you enjoy.

Readme

Keywords

none

Package Sidebar

Install

npm i gulp-nekyll

Repository

github.com/webmakersteve/gulp-nekyll

Homepage

github.com/webmakersteve/gulp-nekyll

Weekly Downloads

0

Version

0.0.2

License

GPL

Last publish

Collaborators

  • webmakersteve
Try on RunKit
Report malware