Question

我正在寻找使用Grunt将CSS文件注入样式标记的解决方案。

＆＃xA;＆＃xA;

示例：

＆ #xA;＆＃xA;

Style.css

＆＃xA;＆＃xA;

  .foo {background：red; }＆＃xA;

＆＃xA;＆＃xA;

index-before.html（在Grunt任务之前）

＆＃xA;＆ #xA;

 <代码>＆LT; HTML＆GT;＆＃XA;＆LT; HEAD＆GT;＆＃XA;＆＃XA; ＆lt; style type =“text / css”＆gt;＆＃xA;＆＃xA; //输出Style.css这里＆＃xA;＆＃xA; ＆LT; /风格＆GT;＆＃XA;＆＃XA;＆LT; /头＆GT;＆＃XA;＆LT;主体＆GT;＆＃XA; ....＆＃XA;＆LT; / BODY＆GT;＆＃XA;＆LT; / html＆gt;＆＃xA;

＆＃xA;＆＃xA;

index-after.html（After Grunt task）

＆＃xA; ＆＃XA;

 <代码>＆LT; HTML＆GT;＆＃XA;＆LT; HEAD＆GT;＆＃XA;＆＃XA; ＆lt; style type =“text / css”＆gt;＆＃xA;＆＃xA; .foo {background：red; }＆＃XA;＆＃XA; ＆LT; /风格＆GT;＆＃XA;＆＃XA;＆LT; /头＆GT;＆＃XA;＆LT;主体＆GT;＆＃XA; ....＆＃XA;＆LT; / BODY＆GT;＆＃XA;＆LT; / html＆gt;＆＃xA;

＆＃xA;＆＃xA;

使用grunt-replace的解决方案（感谢Andy）

＆＃xA;＆＃xA;

 替换：{＆＃xA; dist：{＆＃xA;选项：{＆＃xA;模式：[＆＃xA; {＆＃XA;匹配：'include_css_style_tag'，＆＃xA;替换：'＆lt;％= grunt.file.read（“assets / css / styles.css”）％＆gt;'＆＃xA; }＆＃XA; ]＆＃XA; }，＆＃XA;文件：[＆＃xA; {expand：true，flatten：true，src：['index.html']，dest：'build /'}＆＃xA; ]＆＃XA; }＆＃XA;}＆＃XA;

＆＃XA;＆＃XA;  的index.html  
＆＃XA;＆＃XA ;  ＆lt; style type =“text / css”＆gt;＆＃xA; @@ include_css_style_tag＆＃xA;＆lt; / style＆gt;＆＃xA;  ＆＃xA;

Answer 1

使用replace。

在您的HTML中使用replace识别的指标：

<style type="text/css">
  @@mycss
</style>

Load your css file到Gruntfile.js中的变量：

var css = grunt.file.read(cssfilepath [, options]);

然后添加一个替换任务，例如：

replace: {
  dist: {
    options: {
      patterns: [{
        match: 'mycss',
        replacement: css
      }]
    },
    files: [{
      expand: true,
      flatten: true,
      src: ['src/index.html'],
      dest: 'src/index.html'
    }]
  }
};

注意，我没有对此进行过测试，但是如果您按照replace文档进行操作，则应该为您的系统做好准备。

Grunt将CSS文件注入<style>标签

1 个答案: