Question

我正在为找到特定字体的grunt构建一个自定义任务，并且基本上输出一个使用PHP变量来配置该特定字体的定义。

它使用下划线和postcss。

它对使用该字体的所有CSS选择器进行分组，并输出与此类似的字符串：

selector1, selector2, selector3 {
    font-family: <?php echo $font_1 ?>, Font 2, Font 3, Font 4;
}

以下是自定义任务的代码：

// Extract configurable font data
// ======================================================================

grunt.registerTask('extractfontdata', 'Extract configurable properties', function () {

    console.log('Extracting configurable font data');

    var match = /Myriad Pro/gim;
    var contents = grunt.file.read('assets/css/leadscon.css');
    var css = postcss(function (css) {

        var findings = {};
        css.eachDecl(function (decl) {


            if (decl.value.match( match ) && decl.parent.selector !== undefined) {


                var fonts = decl.value.replace(/(\r\n|\n|\r|"|')/gm, "").split(',');
                var prop = _.find(fonts, function(font) { return font.match(match) });

                var finding = findings[ prop ] = findings[ prop ] || {};

                finding.selectors = finding.selectors || [];
                finding.fontstack = finding.fontstack || [];

                finding.selectors.push( decl.parent.selector.replace(/(\r\n|\n|\r|"|'|\s)/gm, "").split(',') );
                finding.fontstack.push( fonts );

                finding.selectors = _(finding.selectors).chain().flatten().uniq().value();
                finding.fontstack = _(finding.fontstack).chain().flatten().uniq().value();

            }


        });

        var result = '';
        var j = 0;
        for ( var font in findings ) {
            findings[font].fontstack.every(function(f, i) {
                if (f.match(font)) {
                    findings[font].fontstack[i] = '<?php echo $font_' + j++ + ' ?>';
                }
            });

            result += findings[font].selectors.join(',') + ' { font-family: ' + findings[font].fontstack.join(',') + ' } ';
        }

        console.log(result);

        // Now insert result into header.php


    }).process(contents);
});

目前，这会将result设置为：

body,.footer-widget.widget_nav_menu.widget-title 
{ 
    font-family: <?php echo $font_0 ?>, PT Sans, Helvetica Neue, Helvetica, Arial, sans-serif 
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.widget.widget-title,.widget_lc_cta,.header-widget.widget_lc_events.events,.widget_accordion_widget.accordion-widget.resp-tabs-container>.resp-accordion,article.single>.article-header.breadcrumbs,article.single>.article-header.meta 
{ 
    font-family: <?php echo $font_1 ?>, Open Sans Condensed, PT Sans, Helvetica Neue, Helvetica, Arial, sans-serif 
}

我已将此代码添加到header.php：

<style>
/* extractfontdata */

</style>

现在，如何在header.php中找到字符串“extractfontdata”，并在其后面插入result？

Answer 1

如果有人想知道，这对我有用：

        // Now insert result into header.php

        var header = grunt.file.read('header.php').split('\n');

        var line_1 = _.indexOf(header, _(header).find(function(el) { return el.match(/extractfontdata/i) }) );
        var line_2 = _.indexOf(header, _(header).find(function(el) { return el.match(/endextractfontdata/i) }));

        var start = Math.min(line_1, line_2) + 1;
        var end = Math.max(line_1, line_2);

        var num = Math.min((end - start), 0);

        header.splice(start, num, result);

        for ( var i = start-2; i <= end+2; i++) {
            console.log(header[i]);
        }
        grunt.file.write('header.php', header.join('\n'));

Grunt在文件中的模式之后插入字符串

1 个答案: