Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/meeroslav/gulp-inject-partials

A recursive injection of partials based on their path name. Implementation of specific case of gulp-inject.
https://github.com/meeroslav/gulp-inject-partials

gulp gulp-inject-partials html injection partials

Last synced: about 2 months ago
JSON representation

A recursive injection of partials based on their path name. Implementation of specific case of gulp-inject.

Awesome Lists containing this project

README 

        
# gulp-inject-partials



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

[![Build Status][travis-image]][travis-url]

[![Dependency Status][depstat-image]][depstat-url]

[![Code Climate][codeclimate-image]][codeclimate-url]



> A recursive injection of partials based on their path name for [gulp](https://github.com/wearefractal/gulp).



**Gulp-inject-partials** parses target file, located defined placeholders and injects file contents based on their relative path. See [Basic usage](#basic-usage) and [More examples](#more-examples) below.

Gulp-inject-partials is based/inspired by [`gulp-inject`](https://github.com/klei/gulp-inject).



**Note:** NodeJs v4 or above is required.



## Installation



Install `gulp-inject-partials` as a development dependancy:



```shell

npm install --save-dev gulp-inject-partials

```



## Basic usage



Each pair of comments are the injection placeholders (aka. tags, see [`options.start`](#optionsstart) and [`options.end`](#optionsend)).



**index.html**

```html



  My index



  

  



```

**partial/_mypartial.html**

```html



  This text is in partial



```

**gulpfile.js**

```javascript

var gulp = require('gulp');

var injectPartials = require('gulp-inject-partials');



gulp.task('index', function () {

  return gulp.src('./src/index.html')

           .pipe(injectPartials())

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

});

```

**Results in**

```html



  My index



  

  


  This text is in partial



  



```



## More examples



### Injecting nested partials



Nesting partials works same way as single level injection. When injecting partials, `gulp-inject-partials` will parse parent file in search for partials to inject. Once it finds a partial will then recursively parse child partial.



**index.html**

```html



  My index



  

  



```

**views/_mypartial.html**

```html



  This is in partial

  

  

  

  



```

**views/_mypartial2.html**

```html



  This text is in partial 2



```

**views/_mypartial3.html**

```html



  This text is in partial 3



```

**gulpfile.js**

```javascript

var gulp = require('gulp');

var injectPartials = require('gulp-inject-partials');



gulp.task('index', function () {

  return gulp.src('./src/index.html')

           .pipe(injectPartials())

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

});

```

**Results in**

```html



  My index



  

  


  This is in partial

  

  


  This text is in partial 2



  

  

  


  This text is in partial 3



  



  



```



### Setting the custom `start` and/or `end` tag



It's possible to change start and end tag by setting [`option.start`](#optionsstart) and [`options.end`](#optionsend) respectivelly.



**index.html**

```html



  My index



  <## partial/_mypartial.html>

  ##>



```

**partial/_mypartial.html**

```html



  This text is in partial



```

**gulpfile.js**

```javascript

var gulp = require('gulp');

var injectPartials = require('gulp-inject-partials');



gulp.task('index', function () {

  return gulp.src('./src/index.html')

           .pipe(injectPartials({

              start: '<## {{path}}>',

              end: '##>'

           }))

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

});

```

**Results in**

```html



  My index



  

  


  This text is in partial



  



```



### Remove tags after insertion



For production purposes we would like inject tags to be removed and have a clean html. This is possible with [`options.removeTags`](#optionsremovetags).



**index.html**

```html



  My index



  

  



```

**partial/_mypartial.html**

```html



  This text is in partial



```

**gulpfile.js**

```javascript

var gulp = require('gulp');

var injectPartials = require('gulp-inject-partials');



gulp.task('index', function () {

  return gulp.src('./src/index.html')

           .pipe(injectPartials({

              removeTags: true

           }))

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

});

```

**Results in**

```html



  My index



  


  This text is in partial




```



## API



### inject(options)



#### options.start

Type: `string`  

Param (optional): `path` - relative path to source file  

Default: ``  

Used to dynamically set starting placeholder tag, which might contain relative `path` to source file. Even thou this parameter is optional, whithout it no file would be injected.



#### options.end

Type: `string`  

Param (optional): `path` - relative path to source file     

Default: ``  

Used to dynamically set ending placeholder tag, which might contain relative `path` to source file.



#### options.removeTags

Type: `boolean`  

Default: false  

When `true` the start and end tags will be removed when injecting files.



#### options.quiet

Type: `boolean`  

Default: false  

When `true` gulp task will not render any information to console.



#### options.prefix

Type: `string`  

Default: (Empty string)  

Prefix path to prepend to every route processed e.g. `relative/path/to/partials/`. Note that full route is still relative.



#### options.ignoreError

Type: 'boolean'

Default: false

When `true` ignores missing files during the injection and shows just info message 



## License



[MIT](http://en.wikipedia.org/wiki/MIT_License) © [Miroslav Jonas](mailto:[email protected])



[npm-url]: https://npmjs.org/package/gulp-inject-partials

[npm-image]: https://img.shields.io/npm/v/gulp-inject-partials.png



[travis-url]: http://travis-ci.org/meeroslav/gulp-inject-partials

[travis-image]: https://travis-ci.org/meeroslav/gulp-inject-partials.svg?branch=master



[depstat-url]: https://david-dm.org/meeroslav/gulp-inject-partials

[depstat-image]: https://david-dm.org/meeroslav/gulp-inject-partials.png



[codeclimate-url]: https://codeclimate.com/github/meeroslav/gulp-inject-partials

[codeclimate-image]: https://codeclimate.com/github/meeroslav/gulp-inject-partials/badges/gpa.svg