5 Star 18 Fork 2

蓝飞 / gulp-file-inline

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 3.22 KB
一键复制 编辑 原始数据 按行查看 历史
Jealous 提交于 2019-02-01 16:18 . Updated coverage modules

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
	}
}
NodeJS
1
https://gitee.com/lanfei/gulp-file-inline.git
git@gitee.com:lanfei/gulp-file-inline.git
lanfei
gulp-file-inline
gulp-file-inline
master

搜索帮助