0
그래서 대기업 용 SPA Styleguide를 구축하기 위해 GULP를 사용하고 있습니다. 내 모든 꿀꺽 꿀꺽 파일에 글꼴로 생성되는 모든 SVG 아이콘이 있습니다. 빌드하고 싶었던 것은 부분 뷰 (각진)로 사용할 수있는 HTML 파일이었습니다. 그래서 누군가 새로운 SVG를 올릴 때마다 매번 새로운 HTML 파일을 생성합니다. 따라서이 부분 뷰를 최신으로 참조하는 스타일 가이드를 유지합니다. . 너무 복잡해 질 수는 없기 때문에 Jr. 개발자 그룹에 전달 될 것입니다. 여기까지 내가 지금까지 가지고있는 것이있다. 내가 꿀꺽 꿀꺽 마시는 일을 할 때, 나는 현재 거기에있는 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/.'))
}
});
옥 템플릿 : 옥에서
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>
보시다시피 단 하나의 아이콘이 나열되어 있지만 min.css 및 scss 글꼴 파일은 총 4 개의 아이콘을 표시합니다. 도움
무엇이'HTML 아이콘 파일'입니까? 그런 건 없어. 제목을 변경하여 실제 문제를 설명하십시오. – vsync