html-stitch
v0.1.1
Published
Grunt plugin for html template.
Downloads
51
Maintainers
spikeyangReadme
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-devOnce 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.