0

所以我正在使用 GULP 为一家大公司构建一个 SPA 风格指南。我将所有 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/.'))
    }
});

输出 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 个图标。

谢谢您的帮助

4

1 回答 1

0

通过使用 gulp-iconfont-template 解决了这个问题。

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

于 2017-04-03T18:28:49.470 回答