{"bugs":{"url":"https://github.com/internetErik/gulp-htmlincluder/issues"},"dist":{"shasum":"9fd8973987b3e29634e99802b72577ed65a71944","tarball":"https://registry.npmjs.org/gulp-htmlincluder/-/gulp-htmlincluder-1.5.12.tgz","fileCount":47,"integrity":"sha512-ccOxseMZc/VKnXeqXNcsE/G0+C0YI42131/CrcqSRUBWDpRujSmO/kd60nb7v2wgjQST4SgXeiKZWuVrd16nlg==","signatures":[{"sig":"MEUCIC4EM+Dq4gtTv4YloTihl+NQsVrH6RFIQ21S/wNFA3SvAiEAg/uhDUPa4n7Ur7z6K/judaojL1qpXZt//Yw0yk8nmng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":161646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3jGnCRA9TVsSAnZWagAAEBsP/1YMtBRZJpzwOMIWNWlm\nUyVSUI9bk0MIeYIWapJndNaTJHKPaljZOMncBYUOykv2Hd6WvoTIhUj8lx4t\nHz8Rpzr4NL1+M+Am3yrxScQhXSa784LN/yl43cU1OOrReOZVs3xhlUZTsk3R\nCQvXBGCsaUUTKiQVrXPKLsgo8yoQ0QvogEYhkRe1FbEgOf/MZFSb6hkrcBRf\nBOwo1+nxgtH2ea4IcEiar3r6pzn0Kw21S2DV+KZxPCM9Q/LyYEA/InaXKbtd\nNbQkqei5lru/Vd8y+cDsT1ylJxGmPlXnut0sEDsuiMxQFR9T3jstsUb0UvxW\nih1oR6WELQLu1XDbKbpnaAtXtSDFEsq+n2Hf+0ait8jSgkWUqnfZk5zRh2iB\n1oBDt8GOaik9NrKmfQP8bUO9Tv73Qmc3AmyegrJyzd1Ti5s5raomz0hLcNvD\nSeTXV2QSAzihYzS7oswWGLMKf7mfZp6w6BHj+a6SkCCmM4aObpt5LR9S8jh9\nK3w9dN0dqfO16fJuExvChxZ2YyN9qNCrLWLIqWhkBTdnBwg2b2YDN6D2vzbE\nSmI2U7tBTQKRKZLCCu6ua7VCQC0i1gx5RNnMvEcV/PwdX8qY2fx7RKpRU2LP\nR7tOCDFowwFJ1gmGgdjZ67c2LUd8vwrkSVtBg7xCqCD90//NqvEb4qFtkNfA\nprDm\r\n=WK0x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"./index.js","name":"gulp-htmlincluder","author":{"url":"https://github.com/internetErik","name":"Erik Christianson"},"readme":"# gulp-htmlincluder\n[![NPM version][npm-image]][npm-url]  [![Dependency Status][depstat-image]][depstat-url]\n\n> htmlincluder plugin for [gulp](https://github.com/wearefractal/gulp)\n\n## What does this do?\n\nAt it's most basic level, this allows you to build files out of other files by marking up your files in a particular way. It also lets you insert data into these files (from a json object).\n\n## What was this intended to do?\n\nhtmlincluder was written with the intention of working on static websites while still allowing for a component based development. It also was intended to let the individual components be testable by themselves by allowing the individual component files to include portions that would be removed on build.\n\nIt also can allow the inclusion of some dynamic content into these static sites, as long as you can wrangle said content into a json object and pass it in when you are building.\n\nI'm sure this can be put to a much broader use than originally intended (and may do for a name change at some point, since there is no reason you couldn't include json files into json files, or do other things.)\n\n## Usage\n\n### Install\n\n```shell\nnpm install --save-dev gulp-htmlincluder\n```\n\n### Sample `gulpfile.js`\n\nThen, add it to your `gulpfile.js`:\n\n```javascript\nvar gulp = require('gulp'),\n\tincluder = require('gulp-htmlincluder');\n\ngulp.task('htmlIncluder', function() {\n  gulp.src('files/*.html')\n    .pipe(includer())\n      .pipe(gulp.dest('dist/'));\n});\n\n// and example using a json data file\ngulp.task('htmlIncluderJson', function() {\n  var json = require('./input-file.json');\n  var options = {\n    jsonInput    : json,\n  };\n\n  gulp.src('files/*.html')\n    .pipe(includer(options))\n    .pipe(gulp.dest('dist/'));\n});\n\n\ngulp.task('default', ['htmlIncluder']);\n\ngulp.task('includeJson', ['htmlIncluderJson']);\n\ngulp.task('watch', function() {\n  gulp.watch(['files/*.html'], function(event) {\n    gulp.start('default');\n  });\n});\n```\n\n## API\n\n### *File Naming Requirement*\n\nhtmlincluder *requires* files follow a particular naming convention.\n\nFiles that you want to include in other files begin with `-`.\n\nFiles that you want to wrap around other files begin with `_`.\n\nFiles that you want to use to build the resulting static pages can be named however you want, as long as they don't begin with `-` or `_`.\n\nRight now this is necessary because the files that will ultimately exist in the build folder are those that don't start with `-` or `_`. I'd love to change this to determine this in another manner (for example, only files that aren't included are finally built). Would love a pull request trying this since I'm not sure I'll get around to it soon.\n\n### Terminology\n\nBasic tag structure\n\n`<!--#tagName attributeName=\"attributeValue\" -->`\n\n### All Tags\n\nNote: '*' means required attribute\n\n* Wrapping a file with another file\n  * `<!--#wrap path=\"*\" jsonPath=\"\" rawJson=\"\" -->`\n  * `<!--#middle -->` <-- the wrapped file gets inserted here\n  * `<!--#endwrap -->`\n* Inserting a file\n  * `<!--#insert path=\"*\" jsonPath=\"\" rawJson=\"\" -->`\n* Inserting Json (passed in from parent component)\n  * `<!--#data jsonPath=\"*\" default=\"\" rawJson=\"\" -->`\n* Inserting Json (from data input, or default value)\n  * `<!--#jsonInsert jsonPath=\"*\" default=\"\" -->`\n* Control Flow\n  * If\n    * `<!--#if jsonPath=\"*\" rawJson=\"\" -->`\n    * `<!--#endif -->`\n  * Each (repeater)\n    * `<!--#each count=\"*\" jsonPath=\"\" rawJson=\"\" -->`\n    * `<!--#endeach -->`\n* Clipping (Ignores parts of file)\n  * `<!--#clipbefore -->`\n  * `<!--#clipafter -->`\n  * `<!--#clipbetween -->`\n  * `<!--#endclipbetween -->`\n\n### Attributes\n\n#### path\n\nA relative (to current file) path to a file.\n\n#### jsonPath\n\nA path to data in a json object. For example:\n\n```json\n{\n  a: {\n    b: {\n      c: 'hello world'\n    }\n  }\n}\n```\n\nThe path to `c` is `a.b.c`.\n\n#### rawJson\n\nA string that contains a json object.\n\n*Warning*\n\nInternally `eval` is used so beware. But also, you could technically write a script that generates an object if you need more complicated data.\n\nFor example:\n\n`rawJson=\"(function(){ return {title: 'generated object?'} })()\"`\n\n#### count\n\nOn an #each you can tell it how many times to repeat the inner content with a count attribute\n\n`<!--#each count=\"3\" -->hello world<!--#endeach -->\n\n### Insert\n\nThis is the simplest use case.  Simply put the following html comment\n\n`<!--#insert path=\"<relative-path-to-file.ext>\" jsonPath=\"\" rawJson=\"\" -->`\n\n#### Example\n\n`file1.html`\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n<!--#insert path=\"-file2.html\" -->\n</body>\n</html>\n```\n\n`-file2.html`\n```html\n  hello world\n```\n\nResults\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n  hello world\n</body>\n</html>\n```\n\n#### Configure insert to use other text\n\nIf you want to use ssi includes along with this, and so have the insert string follow that format there is an arguemtn to pass into the htmlincluder in gulp.\n\nThanks to theSLY for suggesting this!\n\n```javascript\nvar gulp = require('gulp'),\n  includer = require('gulp-htmlincluder');\n\ngulp.task('htmlIncluder', function() {\n  var options = {\n    insertPattern: 'include virtual',\n  };\n\n  gulp.src('files/*.html')\n//now looks for &lt;!--#include virtual, instead of &lt;!--#insert\n    .pipe(includer(options))\n    .pipe(gulp.dest('dist/'));\n});\n\n\ngulp.task('default', ['htmlIncluder']);\n\n\ngulp.task('watch', function() {\n  gulp.watch(['files/*.html'], function(event) {\n    gulp.start('default');\n  });\n});\n```\n\n### Wrap\n\n`<!--#wrap path=\"<relative-path-to-file.ext>\" jsonPath=\"\" rawJson=\"\" -->`\n\nAND\n\n`<!--#endwrap -->`\n\nThe middle tag must be placed in the wrap file so we know where to put the middle part of the other file\n\n`<!--#middle -->`\n\n#### Example\n\n`file1.html`\n```html\n<!--#wrap path=\"_file2.html\" -->\n  hello world\n<!--#endwrap -->\n```\n\n`_file2.html`\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n<!--#middle -->\n</body>\n</html>\n```\n\nResults:\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n  hello world\n</body>\n</html>\n```\n\n### data\n\nInside of wrap and insert tags that you have used the `jsonPath` attribute on you can use use this tag to print data that has been passed down.\n\n`<!--#data jsonPath=\"<path.to.json>\" default=\"some text\" rawJson=\"\" -->`\n\n#### Example\n\n`file1.html`\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n<!-- JSON path passed down from above -->\n<!--#insert path=\"-insert.html\" jsonPath=\"hello\" -->\n</body>\n</html>\n```\n\n`-insert.html`\n```html\n<div>\n  <!--#data jsonPath=\"world\" -->\n</div>\n```\n\n`file.json`\n```json\n  {\n    \"hello\" : {\n      \"world\" : \"hello world\"\n    }\n  }\n```\n\nResults\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n  <div>\n    hello world\n  </div>\n</body>\n</html>\n```\n\n### jsonInsert\n\nWhen using a json data file, you can pull data from it directly using this tag.\n\n`<!--#jsonInsert jsonPath=\"<path.to.json>\" rawJson=\"\" -->`\n\n#### Example\n\n`file1.html`\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n<!--#jsonInsert jsonPath=\"hello.world\" -->\n</body>\n</html>\n```\n\n`file.json`\n```json\n  {\n    \"hello\" : {\n      \"world\" : \"hello world\"\n    }\n  }\n```\n\nResults\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n  hello world\n</body>\n</html>\n```\n\n#### Inline json objects\n\nInstead of using the data file, you can provide a raw json object\n\n`<!--#jsonInsert jsonPath=\"path.to.json\" rawJson=\"{ path: { to: { json: \"hello world\" } } }\" -->`\n\nResults\n\n`hello world`\n\n### Each\n\nEach can be used to iterate over a json array, or just to repeat some data a number of times.\n\n#### Just with a count\n\n```\n<!--#each jsonPath=\"this\" count=\"5\" -->\n  <div>hello world</div>\n<!--#endeach -->\n```\n\nResults:\n```\n\n  <div>hello world</div>\n\n  <div>hello world</div>\n\n  <div>hello world</div>\n\n  <div>hello world</div>\n\n  <div>hello world</div>\n\n\n```\n\n#### With an array of values in json input\n\njson input:\n```\n{\n  data : [1, 2, 3, 4]\n}\n```\n\n\n```\n<!--#each jsonPath=\"data\" -->\n  <div><!--#data --></div>\n<!--#endeach -->\n```\n\nResults\n```\n\n  <div>1</div>\n\n  <div>2</div>\n\n  <div>3</div>\n\n  <div>4</div>\n\n\n```\n\n#### With an array of values\n\n\n```\n<!--#each jsonPath=\"this\" rawJson=\"[1, 2, 3, 4]\" -->\n  <div><!--#data --></div>\n<!--#endeach -->\n```\n\nResults\n```\n\n  <div>1</div>\n\n  <div>2</div>\n\n  <div>3</div>\n\n  <div>4</div>\n\n\n```\n\n#### With an array of values, limited by count\n\n\n```\n<!--#each jsonPath=\"this\" rawJson=\"[1, 2, 3, 4]\" count=\"2\" -->\n  <div><!--#data --></div>\n<!--#endeach -->\n```\n\nResults\n```\n\n  <div>1</div>\n\n  <div>2</div>\n\n\n```\n\n\n\n#### With an array of objects\n\n**note: use single quotes in json objects, which means you'll need to escape**\n\n```\n<!--#each jsonPath=\"this\" rawJson=\"[\n    { name: 'Tom', age: 33, bio: 'Bio for Tom' },\n    { name: 'Dick', age: 55, bio: 'Dick\\'s bio' },\n    { name: 'Jane', age: 28, bio: 'Bio for Jane' },\n    { name: 'Harry', age: 27 },\n  ]\" -->\n  <div>name: <!--#data jsonPath=\"name\" --></div>\n  <div>age: <!--#data jsonPath=\"age\" --></div>\n  <div>bio: <!--#data jsonPath=\"bio\" default=\"nothing is known about them\" --></div>\n<!--#endeach -->\n```\n\nResults:\n```\n\n  <div>name: Tom</div>\n  <div>age: 33</div>\n  <div>bio: Bio for Tom</div>\n\n  <div>name: Dick</div>\n  <div>age: 55</div>\n  <div>bio: Dick's bio</div>\n\n  <div>name: Jane</div>\n  <div>age: 28</div>\n  <div>bio: Bio for Jane</div>\n\n  <div>name: Harry</div>\n  <div>age: 27</div>\n  <div>bio: nothing is known about them</div>\n\n\n```\n\n### Clip tops and bottoms off of files\n`<!--#clipbefore -->`\n\n`<!--#clipafter -->`\n\n#### Example\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\n<!--#clipbefore -->\nblah\n<!--#clipafter -->\n</body>\n</html>\n```\n\nResults:\n```html\nblah\n```\n\n### Clip between\n`<!--#clipbetween -->`\n\n`<!--#endclipbetween -->`\n\n#### Example\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\nsomething\n<!--#clipbetween -->\na widget!\n<!--#endclipbetween -->\nsomething else\n</body>\n</html>\n```\n\nResults:\n```html\n<!doctype html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Document</title>\n</head>\n<body>\nsomething\nsomething else\n</body>\n</html>\n```\n\n## More Complicated Examples\n\n## License\n\n[MIT License](http://en.wikipedia.org/wiki/MIT_License)\n\n[npm-url]: https://npmjs.org/package/gulp-htmlincluder\n[npm-image]: https://badge.fury.io/js/gulp-htmlincluder.png\n\n[travis-url]: http://travis-ci.org/internetErik/gulp-htmlincluder\n[travis-image]: https://secure.travis-ci.org/internetErik/gulp-htmlincluder.png?branch=master\n\n[coveralls-url]: https://coveralls.io/r/internetErik/gulp-htmlincluder\n[coveralls-image]: https://coveralls.io/repos/internetErik/gulp-htmlincluder/badge.png\n\n[depstat-url]: https://david-dm.org/internetErik/gulp-htmlincluder\n[depstat-image]: https://david-dm.org/internetErik/gulp-htmlincluder.png\n","gitHead":"911bdc5d527a9ea8cb5837caddad6095e8adfd59","scripts":{"build":"webpack -p","webpack":"webpack -w"},"_npmUser":{"name":"interneterik","email":"internet.erik@gmail.com"},"homepage":"https://github.com/internetErik/gulp-htmlincluder","keywords":["gulpplugin"],"licenses":[{"type":"MIT"}],"repository":{"url":"git://github.com/internetErik/gulp-htmlincluder.git","type":"git"},"_npmVersion":"5.6.0","description":"Gulp plugin for building files into each other.  Made for a workflow involving responsive unit testing.","directories":{},"maintainers":[{"name":"interneterik","email":"internet.erik@gmail.com"}],"_nodeVersion":"9.11.1","dependencies":{"through2":"*","gulp-util":"~2.2.0"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"gulp":"^3.9.1","mocha":"*","should":"~2.1.0","webpack":"^3.11.0","istanbul":"*","babel-cli":"^6.26.0","coveralls":"*","babel-core":"^6.26.0","webpack-cli":"^2.0.4","babel-loader":"^7.1.2","event-stream":"*","babel-preset-env":"^1.6.1","mocha-lcov-reporter":"*"},"_npmOperationalInternal":{"tmp":"tmp/gulp-htmlincluder_1.5.12_1524511142788_0.7613809291356315","host":"s3://npm-registry-packages"},"_id":"gulp-htmlincluder@1.5.12","version":"1.5.12"}