Gulp 创建脚本以内联 css 到 head

Question

我无法表达我想要的东西，但我确信之前有人问过这个问题。我正在寻找一种使用 gulp 将预编译的 CSS 注入运行时执行的 javascript 函数的方法。基本上是这样的：

build/index.html

内容：

<div> <!-- content here --></div>

build/index.css

内容：

div {
    background:red;
    }
/* more rules */

编译成这样的东西：

dist/index.html

内容：

<script>(function(){
         var style=document.createElement('style');
             style.innerHTML='div{background:red;} /* all the other rules */';
             document.head.appendChild(style);
      }());</script>

<div></div>

它不必完全类似于此，但我希望我的意思是清楚的。我正在寻找 away 以避免将我的 css 转换为能够在运行时由 js 注入头部的内联字符串的工作。

看清楚了吗？您知道在这个过程中有什么帮助吗？

Answer 1

这是我到目前为止尝试过的方法，

这是我的文件夹结构。我的 SCSS 文件使用 gulp

编译为 CSS

SCSS 文件

body{
  background-color: black;
}

CSS 文件

body{
  background-color: black;
}

script.js

(function(){
  var style = document.createElement("style");
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function(){
    if(this.readyState == 4 && this.status == 200){
      style.innerHTML = this.responseText;
    }
  };
  xhttp.open("GET","../css/style.css",true);
  xhttp.send();
  document.head.appendChild(style);
})();

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <script src="js/script.js"></script>
</body>
</html>

这是我所做的。我创建了一个 IIFE(immediately-invoked 函数表达式)，它创建了一个 style 元素。我正在向我的 style.css 文件发出 ajax 请求并获取其内容。最后将其附加到 head 部分。我没有包括 link 标签。我正在从 JS 加载样式。

这是您所期望的吗？

Answer 2

对于遇到类似问题的其他人，这就是我解决问题的方法。
从 gulp-css-to-js-style plugin by spacerockzero, I made some minor modifications to his code and achieve exactly what I wanted. As it stood in the beginning, the plugin was a single file with no dependencies. You can see his original code on Github 开始。这是我想出的：

'use strict';

var through = require('through2');

/**
 * Inject style tag with my minified, one-line css
 */

module.exports = function injectCSS() {
var stream = through.obj(function(file, enc, cb) {
var template = 'function injectStyles(rule) {\n' +
  'var style = document.createElement("style");\n' +
  'style.innerHTML = rule;\n' +
  'document.head.appendChild(style);\n' +
  '}\n' +
  "injectStyles('" + file.contents + "');\n";

file.contents = new Buffer(template);
    this.push(file);
    cb();
  });

  return stream;
}

唯一需要注意的是，我发现除了 CSS 文件的开头之外，我无法在任何地方包含 CSS Media Queries 和 @keyframes - (I我确定有解决这个问题的方法，我只是没有深入研究它）。所以，我只是创建了多个 css 文件，脚本执行了多次，从而创建了多个样式元素。这是在页面加载时附加到我的 HTML 的示例。

<script>
(function(){

  function injectStyles(rule) {
    var style = document.createElement("style");
    style.innerHTML = rule;
    document.head.appendChild(style);
  }

  injectStyles('@media(min-width:375px){.visible-content{margin-left:auto !important}}');
}());
</script>

希望这对其他人有用！ :)

Gulp 创建脚本以内联 css 到 head

Gulp create script to inline css to head

javascript

css

code-injection

gulp