npm

Need private packages and team management tools?Check out npm Orgs. »

gulp-embed-json

1.4.1 • Public • Published

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

install

npm i gulp-embed-json

Downloadsweekly downloads

20

version

1.4.1

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability