Gulp SVG图标可输出用于部分视图的HTML文件

Question

因此，我正在使用GULP为一家大公司构建SPA风格指南。 我在gulp文件中将所有SVG图标生成为一种字体。 我想要构建的是一个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/.'))
    }
});

用于输出html文件的Jade模板：

doctype html
html(lang="en")
    head
    body
        for ic in icons
            i(class=ic)
                |.
                = ic

Jade的最终HTML输出：

<!DOCTYPE html><html lang="en"><head></head><body><i class="icon-dependable">.icon-dependable</i></body></html>

如您所见，我只列出了1个图标，但我的min.css和我的scss字体文件总共显示了4个图标。

谢谢您的帮助

Answer 1

仅使用gulp-iconfont-template解决了此问题。

https://www.npmjs.com/package/gulp-iconfont-template

Gulp SVG图标可输出用于部分视图的HTML文件

问题描述

1 个解决方案

解决方案1
0 2017-04-03 18:28:49

Gulp SVG图标可输出用于部分视图的HTML文件

问题描述

1 个解决方案

解决方案1 0 2017-04-03 18:28:49

解决方案1
0 2017-04-03 18:28:49