❤
npm
Sign UpSign In

gulp-replace-image-src-from-data-attr

1.0.8 • Public • Published

gulp-replace-image-src-from-data-attr Build Status

Replace the "src" attribute of <img> tags with specific path from the "data-local-src" attribute in HTML files (or any attribute you specify).

It is very easy to replace the IMG "src" with an alternative "src" throughout your project HTML file.

Installation

Install package with NPM and add it to your development dependencies:

npm install --save-dev gulp-replace-image-src-from-data-attr

Usage

Example 1:

Replace images and copy the new file to a folder in the root called dist.

var rep = require('gulp-replace-image-src-from-data-attr');
const gulp = require('gulp');
 
function replace() {
 
    return gulp
        .src('**/*.html')
        .pipe(rep({
            keepOrigin : false
        }))
        .pipe(gulp.dest('dist/'));
 
}
 
exports.replace = replace;
exports.default = replace;

Example 2:

Using the gulp-rename package to create the file in the exising directory and adding -dist to the end of the filename:

var rep = require('gulp-replace-image-src-from-data-attr');
const gulp = require('gulp');
const rename = require('gulp-rename');
 
function replace() {
 
    return gulp
        .src('**/*.html')
        .pipe(rep({
            keepOrigin : false
        }))
        .pipe(rename(function(path){
            path.basename += '-dist';
        }))
        .pipe(gulp.dest('.'));
}
 
exports.replace = replace;
exports.default = replace;

Result

If the original HTML is like this:

<body>
  <div class="anIconClass">
    <img src="/public/iconA.png" data-local-src="images/icon1.png" />
  </div>
  <div class="anotherClass">
    <img src="../iconB.png" data-local-src="images/icon1-1.png" />
  </div>
  <div>
    <img src="http://a.cdn.com/iconC.png" data-local-src="images/icon1-2.png" />
  </div>
</body>

After running it will be like this:

<body>
  <div class="anIconClass">
    <img src="images/icon1.png" />
  </div>
  <div class="anotherClass">
    <img src="images/icon1-1.png" />
  </div>
  <div>
    <img src="http://a.cdn.com/icon1-2.png" />
  </div>
</body>

API

replace(options)

Options, Type: Object.

options.keepOrigin

Type:Boolean

Default:false

If the value is true, and the the "src" starts with "http:|ftp:|https:|//", then the new "src" is prepended to the origin "src".

options.sourceAttr

Type:String

Default:'data-local-src'

For added flexibility you can name any attribute here, whether it's a data- or alt or whatever you fancy. It's your code.

(Shout out to the maker of "gulp-replace-image-src" which was the basis for this tool)

Readme

Keywords

Package Sidebar

Install

npm i gulp-replace-image-src-from-data-attr

Repository

github.com/ToNyOyO/gulp-replace-image-src-from-data-attr

Homepage

github.com/ToNyOyO/gulp-replace-image-src-from-data-attr#readme

Weekly Downloads

9

Version

1.0.8

License

MIT

Unpacked Size

19.9 kB

Total Files

10

Last publish

Collaborators

  • tonyknibb
Try on RunKit
Report malware