gulp-merge-img

[]

Used to merge image files into one directory without modifying any web code. It supports both css files and html files.

Usage

You do not need to clarify anything in the src css file or html file. Just need to add the action to the build script.

var gulp = require('gulp'),
    gulpif = require('gulp-if'),
    useref = require('gulp-useref'),
    mergeImg = require("gulp-merge-img");
 
gulp.task('default', function () {
    var fileStore = {};
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpif("*.html", mergeImg({fileStore: fileStore, fileType: "html", deleteSrcAsset: true, targetDirAbsolutePath: "merged-imgs"})))
        .pipe(gulpif("*.css", mergeImg({fileStore: fileStore, fileType: "css", deleteSrcAsset: true, targetDirAbsolutePath: "merged-imgs"})));
});

Thre refered img files will be copyed to dir: 'merged-imgs' with name "SHA1-XXXX"(XXXX is the sha1 value of the refered img) style. If you set flag 'deleteSrcAsset' to true, then the source files will be deleted.

Options

options.fileStore

Type: JsonObject
Default: null

File store is used to store the relationship between the original asset path and the expected calculated final path. Set to an empty json object like '{}' to satisfy use case: 'One asset is referenced one more times'.

options.fileType

Type: StringEnum
Default: css

Currently only 'css'(for css files) and 'html'(for html files) are supported(case insensitive).

options.deleteSrcAsset

Type: Boolean
Default: false

Whether or not delete the source files when merging imgs. Be cautious when set as true if the same file will be processed more than 1 times.

options.targetDirAbsolutePath

Type: String
Default: merged-img

The target folder where img files will be merged into.

options.resolveReferenceRelativeTo

Type: String Default: path.dirname(currentVinylFilePath)

The base folder used to resolve new relative path to refer merged img.

License

MIT