我知道这已经有几个月了,但是当我在寻找与此类似的答案时,我实际上遇到了您的问题,并且我想出了一个希望可以适用于您的项目的解决方案。
因此,您似乎从 gulp-svgstore 的文档中获取了该代码。首先,您会注意到他们使用的注入标签用于注入 HTML:
<div class="visuallyhidden">
<!-- inject:svg --><!-- endinject -->
</div>
为了使它与 Pug 一起使用,您需要将标签更改为:
.visuallyhidden
//- inject:svg
//- endinject
这可能是您所需要的,但我想分享一些 gulp 任务,我使用这些<symbol>
元素将多个 SVG 组合成一个 SVG,然后将这些元素注入到.pug
模板中。
脚步
首先,我创建了一个任务,使用标签svgstore
将多个 SVG 文件组合成一个 SVG 。<symbol>
gulp.task('svgstore', () => {
var target = gulp.src('app/includes/svg-defs.pug');
var source = gulp.src('app/svg/*.svg')
.pipe($.svgmin())
.pipe($.svgstore({inlineSvg: true}));
function fileContents(filePath, file) {
return file.contents.toString();
}
return target
.pipe($.inject(source, {transform: fileContents}))
.pipe(gulp.dest('app/includes'));
});
我的应用程序的结构如下所示:
app
|
+--includes
| |
| +--svg-defs.pug
| +--header.pug
+--svg
| |
| +--svg-1.svg
| +--svg-2.svg
+--images
+--styles
+--scripts
因此,目录中的任何 SVG 文件svg
都会组合成一个 SVG。
在svg-defs.pug
我包括注入标签:
.svg-defs-container.visuallyhidden
//- inject:svg
//- endinject
然后在我的 gulpserve
任务中,我必须包含一个监视目录中的任何.svg
更改svg
。
gulp.task('serve', ['views', 'styles', 'scripts', 'fonts'], () => {
...
gulp.watch('app/svg/*.svg', ['svgstore']);
gulp.watch('app/data.json', ['views']);
gulp.watch('app/**/*.pug', ['views']);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
我还必须修改要运行的views
任务,svgstore
然后才能运行它的任何逻辑。这是因为我们想在 gulp 将我们的 pug 编译成 HTML 之前将单个 SVG 注入到我们的模板中。
gulp.task('views', ['svgstore'], () => {
return gulp.src('app/*.pug')
.pipe($.plumber())
.pipe($.pug({pretty: true}))
.pipe(gulp.dest('.tmp'))
.pipe(reload({stream: true}));
});
最后,我只是include
在我的index.pug
文件中添加了一个简单的内容:include ./includes/mixin-interior.pug
doctype html
html.no-js(lang='')
include ./includes/head.pug
body
include ./includes/browser-support.pug
include ./includes/analytics.pug
include ./includes/svg-defs.pug
...
我使用 Yeoman 的generator-webapp来生成我的项目和gulpfile.js
. 我必须进行一些定制才能使其与 Pug 一起使用,但gulpfile
如果事情没有意义,请查看完整内容。