1 В избранное 0 Ответвления 0

OSCHINA-MIRROR/lanfei-gulp-file-inline

Присоединиться к Gitlife
Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)
Присоединиться бесплатно
Это зеркальный репозиторий, синхронизируется ежедневно с исходного репозитория.
Клонировать/Скачать
Внести вклад в разработку кода
Синхронизировать код
Отмена
Подсказка: Поскольку Git не поддерживает пустые директории, создание директории приведёт к созданию пустого файла .keep.
Loading...
README.md

Плагин gulp-file-inline для встраивания ссылок, скриптов и других тегов в файл

Gulp-file-inline — это плагин для Gulp, который позволяет встраивать ссылки, скрипты и другие теги в файлы.

Описание

Плагин gulp-file-inline используется для встраивания тегов в HTML-файлы. Он может быть полезен при разработке веб-приложений, когда необходимо включить внешние ресурсы непосредственно в код приложения.

Установка

Для установки плагина выполните команду:

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

Использование

После установки плагина добавьте его в свой файл 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'));
});

В этом примере мы используем плагин gulp-file-inline, чтобы внедрить все теги из файла index.html в файл dist/index.html.

Пример использования фильтра

Вы можете использовать фильтр для внедрения только определённых тегов:

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'));
});

Этот пример внедряет только теги с атрибутом data-inline="true".

Пример пользовательского типа внедрения

Вы также можете настроить тип внедрения:

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'));
});

Этот пример встраивает изображения из файлов в формате base64.

API

Метод fileInline(options) принимает объект options в качестве аргумента. Объект options имеет следующие свойства:

  • css — настройки для внедрения CSS-тегов;
  • js — настройки для внедрения JS-тегов.

Значения по умолчанию для свойств объекта options можно посмотреть в исходном тексте.

Комментарии ( 0 )

Вы можете оставить комментарий после Вход в систему

Введение

Плагин Gulp для встроенных файлов ресурсов. Расширить Свернуть
MIT
Отмена

Обновления

Пока нет обновлений

Участники

все

Недавние действия

Загрузить больше
Больше нет результатов для загрузки
1
https://gitlife.ru/oschina-mirror/lanfei-gulp-file-inline.git
git@gitlife.ru:oschina-mirror/lanfei-gulp-file-inline.git
oschina-mirror
lanfei-gulp-file-inline
lanfei-gulp-file-inline
master