gulp>> gulp-embed-json>> 返回
项目作者： haensl

项目描述 ：
Gulp plugin to inline/embed JSON data into HTML files.
高级语言： JavaScript
项目地址: git://github.com/haensl/gulp-embed-json.git
创建时间： 2017-11-22T19:37:29Z
项目社区：https://github.com/haensl/gulp-embed-json
开源协议：MIT License
下载


gulp-embed-json

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

NPM

npm version
CircleCI

Installation

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

Quick Start

  1. const embedJSON = require('gulp-embed-json');
  3. gulp.task('embedJSON', () =>
  4.   gulp.src('*.html')
  5.     .pipe(embedJSON())
  6.     .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

  1. <html>
  2.   <head><!-- ... --></head>
  3.   <body>
  4.     <!-- ... -->
  5.     <script type="application/json" src="data.json"></script>
  6.     <script type="application/ld+json" src="structured-data.json"></script>
  7.     <!-- ... -->
  8.   </body>
  9. </html>

structured-data.json

  1. {
  2.   "@context": "http://schema.org",
  3.   "@type": "SoftwareApplication",
  4.   "name": "gulp-embed-json"
  5. }

Gulp task

  1. const embedJSON = requrie('gulp-embed-json');
  3. // ...
  5. gulp.task('embedJSON', () =>
  6.   gulp.src('*.html')
  7.     .pipe(embedJSON({
  8.       mimeTypes: 'application/ld+json'
  9.     }))
  10.     .pipe(gulp.dest('dist/')));

Output

  1. <html>
  2.   <head><!-- ... --></head>
  3.   <body>
  4.     <!-- ... -->
  5.     <script type="application/json" src="data.json"></script>
  6.     <script type="application/ld+json">{"@context":"http://schema.org","@type":"SoftwareApplication","name":"gulp-embed-json"}</script>
  7.     <!-- ... -->
  8.   </body>
  9. </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

  1. <html>
  2.   <head><!-- ... --></head>
  3.   <body>
  4.     <!-- ... -->
  5.     <script type="application/json" src="data.json"></script>
  6.     <!-- ... -->
  7.   </body>
  8. </html>

Folder structure

  1. /src
  2.   index.html
  3.   gulpfile.js
  4.   /assets
  5.     /json
  6.       data.json

Gulp task

  1. const embedJSON = requrie('gulp-embed-json');
  3. // ...
  5. gulp.task('embedJSON', () =>
  6.   gulp.src('*.html')
  7.     .pipe(embedJSON({
  8.       root: './assets/json'
  9.     }))
  10.     .pipe(gulp.dest('dist/')));

minify boolean

Indicate whether or not to minify JSON data.

default: true

Example: Minify

HTML layout

  1. <html>
  2.   <head><!-- ... --></head>
  3.   <body>
  4.     <!-- ... -->
  5.     <script type="application/json" src="data.json"></script>
  6.     <!-- ... -->
  7.   </body>
  8. </html>

data.json

  1. {
  2.   "foo": "bar"
  3. }

Gulp task

  1. const embedJSON = requrie('gulp-embed-json');
  3. // ...
  5. gulp.task('embedJSON', () =>
  6.   gulp.src('*.html')
  7.     .pipe(embedJSON({
  8.       minify: true // default
  9.     }))
  10.     .pipe(gulp.dest('dist/')));

Output

  1. <html>
  2.   <head><!-- ... --></head>
  3.   <body>
  4.     <!-- ... -->
  5.     <script type="application/json">{"foo":"bar"}</script>
  6.     <!-- ... -->
  7.   </body>
  8. </html>

Example: Do not Minify

HTML layout

  1. <html>
  2.   <head><!-- ... --></head>
  3.   <body>
  4.     <!-- ... -->
  5.     <script type="application/json" src="data.json"></script>
  6.     <!-- ... -->
  7.   </body>
  8. </html>

data.json

  1. {
  2.   "foo": "bar"
  3. }

Gulp task

  1. const embedJSON = requrie('gulp-embed-json');
  3. // ...
  5. gulp.task('embedJSON', () =>
  6.   gulp.src('*.html')
  7.     .pipe(embedJSON({
  8.       minify: false
  9.     }))
  10.     .pipe(gulp.dest('dist/')));

Output

  1. <html>
  2.   <head><!-- ... --></head>
  3.   <body>
  4.     <!-- ... -->
  5.     <script type="application/json">{
  6.     "foo": "bar"
  7.     }</script>
  8.     <!-- ... -->
  9.   </body>
  10. </html>

encoding string

Provide the encoding of your JSON files.

default: utf8

Changelog

License