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