Я пытаюсь встроить внешний svg-образ в мой html файл.
Я довольно новичок в gulp, поэтому я не уверен, что у меня все правильно, но все остальное работает кроме изображений svg.
Для встраивания изображений я пытаюсь использовать: Gulp-embed-svg, но он не будет работать.
Когда отображается файл сборки html, это все еще оригинальный тег. Я не могу понять, я что-то упускаю, но что?
Вот мой html
<html>
<head></head>
<body>
<svg src="test.svg" class="inline-svg">aaabbbcccdddeee</svg>
</body>
</html>
// Gulp loader
const {
src,
dest,
task,
watch,
series,
parallel
} = require('gulp');
// --------------------------------------------
// Dependencies
// --------------------------------------------
// CSS / SASS plugins
let sass = require('gulp-sass');
let autoprefixer = require('gulp-autoprefixer');
let minifycss = require('gulp-clean-css');
// JSS / plugins
let uglify = require('gulp-uglify');
// Utility plugins
let concat = require('gulp-concat');
let del = require('del');
let plumber = require('gulp-plumber');
let sourcemaps = require('gulp-sourcemaps');
let rename = require('gulp-rename');
let embedSvg = require('gulp-embed-svg');
// Browser plugins
let browserSync = require('browser-sync').create();
// Images plugins
let imagemin = require('gulp-imagemin');
// HTML plugins
let htmlmin = require('gulp-htmlmin');
// Project Variables
let styleSrc = 'source/styles/**/*.scss';
let styleDest = 'build/styles/';
let imageSrc = 'source/imgs/';
let imageDest = 'build/imgs/';
let vendorSrc = 'source/scripts/vendors/';
let vendorDest = 'build/scripts/';
let scriptSrc = 'source/scripts/*.js';
let scriptDest = 'build/scripts/';
let htmlSrc = 'source/';
let htmlDest = 'build/';
// --------------------------------------------
// Stand Alone Tasks
// --------------------------------------------
// Minifi main index.svg file
function svg(done) {
src('source/*.html')
.pipe(embedSvg({
selectors: '.inline-svg',
}))
.pipe(dest('build/'));
done();
};
// Compiles SASS files
function css(done) {
src('source/styles/**/*.scss')
.pipe(plumber())
.pipe(sass({
outputStyle: 'compressed'
}))
.pipe(rename({
basename: 'main',
suffix: '.min'
}))
.pipe(dest('build/styles'));
done();
};
// Images
function img(done) {
src('source/imgs/*')
.pipe(imagemin())
.pipe(dest('build/imgs'));
done();
};
function svg(done) {
src('source/*.html')
.pipe(embedSvg({
selectors: '.inline-svg' // only replace tags with the class inline-svg
}))
.pipe(dest('build/'));
done();
};
// Minifi main index.html file
function html(done) {
src('source/*.html')
.pipe(htmlmin({
collapseWhitespace: true,
minifyCSS: true,
minifyJS: {compress: {drop_console: true}},
processConditionalComments: true,
removeComments: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
processScripts: ['application/ld+json'],
}))
.pipe(dest('build/'));
done();
};
// Uglify js files
function js(done) {
src('source/scripts/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(dest('build/scripts'));
done();
};
//Concat and Compress Vendor .js files
function vendor(done) {
src(
[
'source/scripts/vendors/jquery.min.js',
'source/scripts/vendors/*.js'
])
.pipe(plumber())
.pipe(concat('vendors.js'))
.pipe(uglify())
.pipe(dest('build/scripts'));
done();
};
// Watch for changes
function watcher() {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./build"
},
notify: false
});
watch(styleSrc, series(css));
watch(imageSrc, series(img));
watch(scriptSrc, series(js));
watch(vendorSrc, series(vendor));
watch(htmlSrc, series(html));
watch(['build/*.html', 'build/styles/*.css', 'build/scripts/*.js', 'build/scripts/vendors/*.js']).on('change', browserSync.reload);
};
// use default task to launch Browsersync and watch JS files
let build = parallel(watcher);
task('default', build);
task('img', img);
task('svg', svg);
Кажется, что не выдает никаких ошибок, но это также не встраивать изображение, чтобы что-то пошло не так.