https://github.com/tsehang/gulp-hbs-router

Gulp plugin that runs like a router, converting templat language into HTML
https://github.com/tsehang/gulp-hbs-router

Last synced: 2 days ago
JSON representation

Gulp plugin that runs like a router, converting templat language into HTML

• Host: GitHub
• URL: https://github.com/tsehang/gulp-hbs-router
• Owner: TseHang
• Created: 2017-11-25T08:16:48.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-27T00:27:18.000Z (almost 7 years ago)
• Last Synced: 2024-09-05T07:38:43.944Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 10.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# gulp-hbs-router

[![NPM version][npm-image]][npm-url]

> Gulp plugin that runs like a router, converting template language into HTML.

##### Why you need?

- When you don't want to use some frontend framwork like react, vue, angular...

cuz your website actually isn't need it...

- Multiple pages controlled by module.

- If you are a senior frontend-er. You should try!

### Install

```

npm install gulp-hbs-router --save-dev

```

### Usage

```javascript

const gulpHbsRouter = require('gulp-hbs-router');

gulp.src('./layout/**/*.hbs')

    .pipe(gulpHbsRouter({

	    cwdPath: `${__dirname}/`,

	    routerPath: 'hbsRouter.js',

	    partialPath: 'partial.js',

	    minify: true,

    }))

    .pipe(gulp.dest('./'))

```

#### You have to create `./hbsRouter.js` `./partial.js`

- **hbsRouter.js** : Listing all Templata DATA here.

You can set data(object) in this file, and each data correspond into its file **independently**.


`Default: './hbsRouter.js'.`

- **partial.js** : You should write your partial  here. Then, router will catch partial by this file in handlebars.


`Default: './partial.js'.`

##### How to write? Look [Example](#example).

## API

### gulpHbsRouter([, options])

- **cwdPath** (default `../../`)


In gulp-hbs-router, we should get data from `'hbsRouter.js'` and partial from `'partial.js'` , so we need to set the `cwdPath`

- **routerPath** (default `'hbsRouter.js'`)


set router's path.

- **partialPath** (default `'partial.js'`)


set partial's path.

- **minify** (default `false`)


set to minify html.

- **compile** (default to `handlebars.compile`)


compile options. See [handlebars reference](http://handlebarsjs.com/reference.html#base-compile) for possible values

### gulpHbsRouter.registerHelper(name, helperFn)

Register a handlebars [helper](http://handlebarsjs.com/#helpers).

## Example

### `gulpfile.js`

```javascript

const gulp = require('gulp');

const gulpHbsRouter = require('gulp-compile-handlebars');

const gulpPlumber = require('gulp-plumber');

gulp.task('hbs', () => {

  gulp.src(['./layout/**/*.hbs'])

    .pipe(gulpPlumber())

    .pipe(gulpPlumber())

    .pipe(gulpHbsRouter({

	  cwdPath: `${__dirname}/`,

      minify: true,

    }))

    .pipe(gulp.dest('./'));

})

```

### `./hbsRouter.js`

```javascript

const hbsRouter = {

  home: {

    description: 'I love home.',

    title: 'Home',

  },

  index: {

    description: 'Simple router',

    title:'Gulp-Hbs-Router Example',

  }

};

module.exports = hbsRouter;

```

### `./partial.js`

```javascript

const fs = require('fs');

const DEFAULT_PATH = 'partial/';

module.exports = (hbs) => {

  hbs.registerPartial('head', getPartials('head.hbs', DEFAULT_PATH));

  hbs.registerPartial('footer', getPartials('footer.hbs', DEFAULT_PATH));

};

function getPartials(filename, path) {

  const template = fs.readFileSync(`./layout/${path}${filename}`, 'utf8');

  return template;

}

```

### `./layout/index.hbs` `./layout/home.hbs`

```html

  {{> head}}

  {{title}}

  
Hi, {{title}}

  {{> footer}}


```

### `./layout/partial/head.hbs`

```html

```

### `./layout/partial/footer.hbs`

```html

  
The end!


```

### You have to add in STRUCTURE

```

...

- gulpfile.js

- hbsRouter.js

- partial.js

- layout/

	- index.hbs

	- home.hbs

	partial/

		- head.hbs

		- footer.hbs

...

```

## License

[MIT](https://opensource.org/licenses/MIT) © [TsaHang](https://github.com/TseHang)

[npm-image]: https://badge.fury.io/js/gulp-hbs-router.svg

[npm-url]: https://www.npmjs.com/package/gulp-hbs-router