Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mdvanes/grunt-kot2html

Grunt task to combine Knockout templates into one HTML for the Knockout.js-External-Template-Engine.
https://github.com/mdvanes/grunt-kot2html

grunt-task

Last synced: 3 days ago
JSON representation

Grunt task to combine Knockout templates into one HTML for the Knockout.js-External-Template-Engine.

Host: GitHub
URL: https://github.com/mdvanes/grunt-kot2html
Owner: mdvanes
License: mit
Created: 2015-03-24T07:49:12.000Z (over 9 years ago)
Default Branch: master
Last Pushed: 2022-09-20T06:32:53.000Z (about 2 years ago)
Last Synced: 2024-10-05T04:15:21.356Z (about 1 month ago)
Topics: grunt-task
Language: JavaScript
Homepage:
Size: 12.7 KB
Stars: 0
Watchers: 2
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE-MIT

Awesome Lists containing this project

README

![Build Status](https://travis-ci.org/mdvanes/grunt-kot2html.svg?branch=master) [![npm version](https://badge.fury.io/js/grunt-kot2html.svg)](https://badge.fury.io/js/grunt-kot2html)

# grunt-kot2html

> Grunt task to combine Knockout templates into one HTML for the Knockout.js-External-Template-Engine.

Based on https://blog.safaribooksonline.com/2014/01/31/using-external-templates-knockout-js/ and https://github.com/rniemeyer/SamplePresentation/blob/master/js/stringTemplateEngine.js

See also [grunt-kot2js](https://github.com/mdvanes/grunt-kot2js).

## Getting Started
This plugin requires Grunt `~0.4.5`

If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

```shell
npm install grunt-kot2html --save-dev
```

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

```js
grunt.loadNpmTasks('grunt-kot2html');
```

Although I recommend using [load-grunt-tasks](https://www.npmjs.com/package/load-grunt-tasks)

## The "kot2html" task

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

```js
grunt.initConfig({
kot2html: {
dist: {
prefix: '/theme/',
src: 'templates/**/*.html',
dest: 'custom-templates.html'
}
}
});
```

Example output:

```html

```

### Properties

#### prefix
Type: `String`

Prefix that is prepended to the template id along with the path. E.g. if the prefix is `/theme/` and the path of a template is `templates/bar.html`, the templateId will be `/theme/template/bar` (without .html).

#### srcRoot
Type: `String`

Root of the input path. This part is not included in the template ID, in contrast to the `src` property.

#### src
Type: `String`

Input path. Location of the HTML Knockout Templates. Expects template files to have the .html extension

#### dest
Type: `String`

Output path. Location of the combined HTML file.

### Usage Examples

#### Default Options
In this example, the sources are files with the .html extension in the `templates` dir and the generated file is `custom-templates.html` in the root dir.

```js
grunt.initConfig({
kot2html: {
dist: {
prefix: '/theme/',
src: 'templates/**/*.html',
dest: 'custom-templates.html'
}
}
});
```

## Contributing
Follow the jshintrc settings for the code style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).

## Release History

* 2015-03-25 v0.1.0 initial release
* 2016-02-25 v0.3.0 added srcRoot property

## To Do

* When committing got: warning: LF will be replaced by CRLF in test/expected/dev. This means that the unit test will fail.
* Add lintspaces
* add minification of generated HTML (at least remove all spaces)
* add template to unit test with same path as generated HTML