Gulp-json-replace NPM

gulp-json-replace

Replace string from a json file.

Usage

Assume you wanna replace the title and the description/keywords of the html file: index.html, signin/signin.html, signup/signup.html

<html>
<head>
    <title>%%title</title>
    <meta charset="utf-8" />
    <meta name="description" content="%%description">
    <meta name="keywords" content="%%keywords">
</head>
<body></body>
</html>

And you had the config file that contains all of the pages meta infomation: config.json

{
    "index.html": {
        "title": "GULP JSON REPLACE",
        "description": "description for the main page",
        "keywords": "keywords for the main page"
    },
    "signin/signin.html": {
        "title": "Sign In",
        "description": "description for the page sign in",
        "keywords": "keywords for the page sign in"
    },
    "signup/signup.html": {
        "title": "Sign Up",
        "description": "description for the page sign up",
        "keywords": "keywords for the page sign up"
    }
}

Rusult: index.html

<!DOCTYPE html>
<html>
<head>
    <title>GULP JSON REPLACE</title>
    <meta charset="utf-8" />
    <meta name="description" content="description for the main page">
    <meta name="keywords" content="keywords for the main page">
</head>
<body></body>
</html>

signin/signin.html

<!DOCTYPE html>
<html>
<head>
    <title>Sign In</title>
    <meta charset="utf-8" />
    <meta name="description" content="description for the page sign in">
    <meta name="keywords" content="keywords for the page sign in">
</head>
<body></body>
</html>

signup/signup.html

<!DOCTYPE html>
<html>
<head>
    <title>Sign Up</title>
    <meta charset="utf-8" />
    <meta name="description" content="description for the page sign up">
    <meta name="keywords" content="keywords for the page sign up">
</head>
<body></body>
</html>

First, install gulp-json-replace as a development dependency:

npm install --save-dev gulp-json-replace

Then, add it to your gulpfile.js:

var jr = require('gulp-json-replace');

gulp.task('json-replace', function() {
    return gulp.src('www/**/*.html')
        .pipe(jr({
            src: './config.json',
            identify: '%%'
        }))
        .pipe(gulp.dest('www/'))
})

API

replace(options)

options

Type: Object

options.src

Type: String or Object Accept the path of json file, or an JavaScript Object Literals.

options.identify

Type: String Default: %% The string to identify the search field.

options.mode

Type: String Default: strict Specify the match mode, the value would be strict or loose, if set to loose, it will ignore the file extension. For example: "index.html" will match files of "index.hbs", "index.html", "index.xxx"...