0
因此，我使用GULP爲大公司構建SPA Styleguide。我把所有的SVG圖標都生成了我的gulp文件中的字體。我想要構建的是一個HTML文件，我可以將其用作部分視圖（角度），因此無論什麼時候有人在新的SVG中投擲，它都會運行，並且每次都會生成一個新的HTML文件，從而使styleguide引用此部分視圖爲最新版本。我不能太複雜，因爲這會交給一羣非常小的開發者。這是我到目前爲止。當我運行吞噬任務時，它只是建立當前在那裏的4個或5箇中的第一個圖標。Gulp SVG圖標輸出部分視圖的HTML文件
咕嘟咕嘟文件（圖標的html文件僅部分）：
gulp.task('fonts:build', function() {
var re = new RegExp(/icon-(\w+)/);
fs.readFile('www/Css/app.min.css', 'utf8', function(err, data) {
var icons = []
if(err)
return console.log(err);
data.split('\r\n').forEach(function(icon) {
var match = re.exec(icon);
if(match)
icons.push('icon-' + match[1])
})
// the gulp-jade plugin expects template local data to be an object
// such as:
// {locals: YOUR_DATA_OBJECT_TO_BIND}
bind({locals: {icons: icons}})
});
// method that will bind data to your template
var bind = function(data) {
gulp.src('Assets/Styles/Sass/CompanyNameFont/IconTemplate.jade')
.pipe(jade(data))
.pipe(gulp.dest('App/partials/icons/.'))
}
});
玉模板輸出的HTML文件：
doctype html
html(lang="en")
head
body
for ic in icons
i(class=ic)
|.
= ic
從玉輸出
最終HTML：<!DOCTYPE html><html lang="en"><head></head><body><i class="icon-dependable">.icon-dependable</i></body></html>
正如你所看到的，我只列出了1個圖標，但是我的min.css和我的scss字體文件總共顯示了4個圖標。
感謝您的幫助
什麼是HTML圖標文件？沒有這樣的事。改變你的頭銜請描述實際問題 – vsync