Gulp plugin to inline/embed JSON data into HTML files.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.eslintrc.json
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
package-lock.json
package.json

README.md

gulp-embed-json

Gulp plugin to inline/embed JSON data into HTML files.

NPM

npm version Build Status

Installation

npm i --save-dev gulp-embed-json

Quick Start

const embedJSON = require('gulp-embed-json');

gulp.task('embedJSON', () =>
  gulp.src('*.html')
    .pipe(embedJSON())
    .pipe(gulp.dest('dist/')));

This gulp task will inline/embed any scripts with JSON source attribute and respective mime type.

Options

mimeTypes string | Array<string>

Provide custom mime types to specify which <script> tags should be embedded.

default: application/json, application/ld+json

Example: Embed only tags with type="application/ld+json"

HTML layout

<html>
  <head><!-- ... --></head>
  <body>
    <!-- ... -->
    <script type="application/json" src="data.json"></script>
    <script type="application/ld+json" src="structured-data.json"></script>
    <!-- ... -->
  </body>
</html>

structured-data.json

{
  "@context": "http://schema.org",
  "@type": "SoftwareApplication",
  "name": "gulp-embed-json"
}

Gulp task

const embedJSON = requrie('gulp-embed-json');

// ...

gulp.task('embedJSON', () =>
  gulp.src('*.html')
    .pipe(embedJSON({
      mimeTypes: 'application/ld+json'
    }))
    .pipe(gulp.dest('dist/')));

Output

<html>
  <head><!-- ... --></head>
  <body>
    <!-- ... -->
    <script type="application/json" src="data.json"></script>
    <script type="application/ld+json">{"@context":"http://schema.org","@type":"SoftwareApplication","name":"gulp-embed-json"}</script>
    <!-- ... -->
  </body>
</html>

root string

Provide the directory root where JSON files are located.

default: __dirname

The folder in which the module is executed.

Example: Alternative JSON file root

HTML layout

<html>
  <head><!-- ... --></head>
  <body>
    <!-- ... -->
    <script type="application/json" src="data.json"></script>
    <!-- ... -->
  </body>
</html>

Folder structure

/src
  index.html
  gulpfile.js
  /assets
    /json
      data.json

Gulp task

const embedJSON = requrie('gulp-embed-json');

// ...

gulp.task('embedJSON', () =>
  gulp.src('*.html')
    .pipe(embedJSON({
      root: './assets/json'
    }))
    .pipe(gulp.dest('dist/')));

minify boolean

Indicate whether or not to minify JSON data.

default: true

Example: Minify

HTML layout

<html>
  <head><!-- ... --></head>
  <body>
    <!-- ... -->
    <script type="application/json" src="data.json"></script>
    <!-- ... -->
  </body>
</html>

data.json

{
  "foo": "bar"
}

Gulp task

const embedJSON = requrie('gulp-embed-json');

// ...

gulp.task('embedJSON', () =>
  gulp.src('*.html')
    .pipe(embedJSON({
      minify: true // default
    }))
    .pipe(gulp.dest('dist/')));

Output

<html>
  <head><!-- ... --></head>
  <body>
    <!-- ... -->
    <script type="application/json">{"foo":"bar"}</script>
    <!-- ... -->
  </body>
</html>

Example: Do not Minify

HTML layout

<html>
  <head><!-- ... --></head>
  <body>
    <!-- ... -->
    <script type="application/json" src="data.json"></script>
    <!-- ... -->
  </body>
</html>

data.json

{
  "foo": "bar"
}

Gulp task

const embedJSON = requrie('gulp-embed-json');

// ...

gulp.task('embedJSON', () =>
  gulp.src('*.html')
    .pipe(embedJSON({
      minify: false
    }))
    .pipe(gulp.dest('dist/')));

Output

<html>
  <head><!-- ... --></head>
  <body>
    <!-- ... -->
    <script type="application/json">{
    "foo": "bar"
    }</script>
    <!-- ... -->
  </body>
</html>

encoding string

Provide the encoding of your JSON files.

default: utf8

Changelog

License