gulp-file-inline

2.2.3 • Public • Published

gulp-file-inline

Build Status Coverage Status Version License Dependencies DevDependencies

A gulp plugin to inline link, script or other tags into the file.

Usage

First, install gulp-file-inline as a development dependency:

npm install --save-dev gulp-file-inline

Then, add it to your gulpfile.js:

var gulp = require('gulp');
var fileInline = require('gulp-file-inline');
 
gulp.task('default', function() {
    return gulp
        .src('index.html')
        .pipe(fileInline())
        .pipe(gulp.dest('dist'));
});

Example

Using filter

var gulp = require('gulp');
var fileInline = require('gulp-file-inline');
 
gulp.task('default', function() {
    return gulp
        .src('index.html')
        .pipe(fileInline({
            js: {
                filter: function(tag) {
                    return tag.indexOf(' data-inline="true"') > 0;
                }
            }
        }))
        .pipe(gulp.dest('dist'));
});

Custom inline type

This is an example to inline images:

var fs = require('fs');
var mime = require('mime');
var gulp = require('gulp');
var fileInline = require('gulp-file-inline');
 
gulp.task('default', function () {
    return gulp
        .src(['index.html'])
        .pipe(fileInline({
            img: {
                tagPattern: /<img[^>]* src=[^>]+>/g,
                urlPattern: / src=['"]?([^'"]+)['"]?/,
                tagParser: function (codes, attrCodes) {
                    return '<img' + attrCodes + ' src="' + codes + '">';
                },
                parser: function (base, filename, encoding, minify) {
                    var content = fs.readFileSync(filename).toString('base64');
                    var contentType = mime.getType(filename);
                    return 'data:' + contentType + ';base64,' + content;
                }
            }
        }))
        .pipe(gulp.dest('dist'));
});

API

fileInline(options)

options

Type: Object

Default:

{
    css: {
        tagPattern: fileInline.CSS_TAG_PATTERN,
        urlPattern: fileInline.CSS_HREF_PATTERN,
        tagParser: fileInline.cssTagParser,
        parser: fileInline.cssParser,
        filter: null,
        minify: true //@see https://www.npmjs.com/package/clean-css#constructor-options
    },
    js: {
        tagPattern: fileInline.JS_TAG_PATTERN,
        urlPattern: fileInline.JS_SRC_PATTERN,
        tagParser: fileInline.jsTagParser,
        parser: fileInline.jsParser,
        filter: null,
        minify: true //@see https://www.npmjs.com/package/uglify-js#minify-options
    }
}

Package Sidebar

Install

npm i gulp-file-inline

Weekly Downloads

53

Version

2.2.3

License

MIT

Unpacked Size

10.7 kB

Total Files

4

Last publish

Collaborators

  • clanfei