自动将样式表插入HTML

Question

如何自动转换类似......

<style>
    /* lotsa CSS rules */
</style>

......变成像......

link

...在HTML文档中？

我目前手动完成。我还使用more和一堆插件。所以，我从一个单独的CSS文件开始，我最初使用link标记。当我完成CSS工作时，我会注释掉style标记并添加:read css/main.css 标记并将所有CSS复制到文档中。 Vim让这更容易：

style

我已经使用postCSS来自动化我的部分工作流程，因此我更喜欢可以轻松与其集成的解决方案。

Gulp对我来说是一个很大的好处，但我对它的运作方式可能不太了解。我尝试搜索插件，我发现太多看起来像他们会做我想要的。其中一些似乎处理CSS和HTML以将{{1}}标记添加到单个元素，这不是我想要的。

• gulp
• gulp-smoosher
• gulp-css-inliner

Answer 1

看起来Grunt有一项任务。查看github repo here。

安装插件：

npm install grunt-inline --save-dev

启用gruntfile中的插件：

grunt.loadNpmTasks('grunt-inline');

  

在项目的Gruntfile中，将一个名为inline的部分添加到传入grunt.initConfig（）的数据对象中。

grunt.initConfig({
  inline: {
    dist: {
     src: 'src/index.html',
    dest: 'dist/index.html'
   }
  }
})

哪个应该改变这个：

<link href="css/style.css?__inline=true" rel="stylesheet" />

进入这个：

<style>
    /* contents of css/style.css */
</style>`