Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including gulp-embed-json with all npm packages installed. Try it out:

var gulpEmbedJson = require("gulp-embed-json")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

gulp-embed-json v1.4.0

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

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free