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.
Метод fileInline(options) принимает объект options в качестве аргумента. Объект options имеет следующие свойства:
Значения по умолчанию для свойств объекта options можно посмотреть в исходном тексте.
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Комментарии ( 0 )