html-stitch

0.1.1 • Public • Published

html-stitch

Grunt plugin to solve the problem of light-weight html file templating engine for Yeoman.

Background

One day I am going to build my first node.js website. And I try to use Yeoman webapp generator. Suddenly I found I need a html template engine , like I used with Django. After some googling , I found there are same requirement one year before.

Please add a templating engine for layout and partials support:

Inside the 'view/layouts/main.html' file: 
<!DOCTYPE html>
{{include 'views/layouts/_ie_shim.html' }}

...

{{include 'views/layouts/_header.html' }}

{{include 'views/index.html' }}

{{include 'views/layouts/_footer.html' }}

After 'yeoman build' everything gets zipped up into one index.html file.

This helps keep the index.html file from turning into a nightmare. As well as providing other benefits.

Above is a very reasonable request, but refused by Grunt core team. We don't need jade. And we don't need handlebars. We just need a simple method to use with Yeoman.

Getting Started

This plugin requires Grunt.

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install html-stitch --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('html-stitch');

The "stitch" task

Overview

In your project's Gruntfile, add a section named stitch to the data object passed into grunt.initConfig().

grunt.initConfig({
  stitch: {
    tasks:{
    options: {
      // Task-specific options go here.
      // output file extensile name
      ext:'handlebars'
    },
    files: {
      // dest is the directory to store the generated html files
      // [...] is the src file path, 
      dest:[test/*.stitch]
    }
    }
  },
})

Options

options.separator

Type: String Default value: ', '

A string value that is used to do something with whatever.

options.punctuation

Type: String Default value: '.'

A string value that is used to do something else with whatever else.

Usage Examples

Default Options

In this example, the default options are used to do something with whatever. 'Stitch' task will scan all .stitch src files. _.stitch files will be considered as a template file, which will not be converted to html file. .stitch files without a prefix '_'/underscore will be converted to html file and put into the destination directory. _.stitch files can be nested within each other. Please don't make it a deadlock because of reference between each other.

grunt.initConfig({
  stitch: {
    options: {},
    target:{
      files: {
        'dest_directory': ['test/*.stitch'],
      }
    }
  },
})

stitch syntax

{{ include _file1.stitch }}

{{ inherit _file2.stitch }}

{{ include _old.stitch:_new.stitch }}

File without a ''/underscore prefix will be converted to html file. File with a ''/underscore prefix will be considered as the building block of template.

Example

<html>
    <head>
    </head>
    <body>
        {{ include _body.stitch }}
 
        {{ include _footer.stitch }}
    </body>
</html>

You can inherit an basic template file and replace some of it's template.

{{ inherit _basic.stitch }}

{{ include _laugh.stitch:_cry.stitch }}

Comment

I'd like to add more functions into it.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Release History

2015-04-02 Add {{ include }} tag.

2015-04-03 Add {{ inherit }} tag, {{ include old:new }} replace-function tag.

2015-04-95 Add ext name config. So it can output *.handlebars file.

License

Copyright (c) 2015 spike yang. Licensed under the MIT license.

Package Sidebar

Install

npm i html-stitch

Weekly Downloads

1

Version

0.1.1

License

MIT

Last publish

Collaborators

  • spikeyang