Gulp SVG Icons для вывода HTML-файла для частичного просмотра
Поэтому я использую GULP для создания SPA Styleguide для большой компании. У меня есть все значки SVG, генерируемые в шрифт в моем файле gulp. Я хотел создать HTML-файл, который я мог бы использовать как частичное представление (угловое), поэтому всякий раз, когда кто-то вбрасывает новый SVG, он каждый раз запускает и генерирует новый HTML-файл, таким образом сохраняя руководство по стилю, ссылающееся на это частичное представление, актуальным., Я не могу стать слишком сложным, потому что это будет передано группе очень младших разработчиков. Вот что у меня так далеко. Когда я запускаю задание gulp, он создает только первую иконку из тех 4 или 5, которые у меня есть в данный момент.
Файл Gulp (только значок 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/.'))
}
});
Шаблон Jade для выходного html-файла:
doctype html
html(lang="en")
head
body
for ic in icons
i(class=ic)
|.
= ic
Окончательный вывод HTML из Jade:
<!DOCTYPE html><html lang="en"><head></head><body><i class="icon-dependable">.icon-dependable</i></body></html>
Как вы можете видеть, у меня есть только 1 иконка в списке, но мои файлы шрифтов min.css и scss показывают всего 4 иконки.
Спасибо за помощь
1 ответ
Решил это с помощью gulp-iconfont-template.