Question

我希望在提供之前将所有CSS文件合并到一个资源中来优化页面。但是，我还使用了多个备用样式表，显然必须将它们作为单独的链接包含在内。

除了将备用样式表打包成数据之类的奇怪技巧：内联它们的URI（聪明，但是......），有没有办法将它们合并到一个文件中？我认为CSS中可能有某种@ -rule（就像链接的媒体属性可以用CSS中的@media替换）但是我还没找到它。

Answer 1

你可以手工完成，但这真的很乏味，而且每次都必须这样做是一种痛苦。听起来你需要的是每次更改样式表时为你完成这项任务的过程。

您应该做的是将构建工具合并到您的目录中，如Grunt。我写了一本初学者指南，开始使用Grunt：http://strongloop.com/strongblog/use-grunt-js-and-the-power-of-javascript-to-automating-repetitive-tasks/

这是一个回复，它完全按照您的说法进行：https://github.com/gruntjs/grunt-contrib-cssmin ..您所要做的就是从回购中获取它或使用Node Package Manager将其本地安装到您的项目中。

这非常简单，为您提供了大量优化构建的选项。不只是CSS而是HTML和JavaScript。天空确实是构建选项的极限。这似乎是大多数前端开发过程的方式。

Grunt并不是唯一的一个孩子，还有Yeoman和周围的其他几个孩子会做同样的事情。

我们已经将Grunt推到了极限，并且已经通过一系列不同的选项进行了大量的构建，我们还没有失望。它真正简化了我们在前端的流程，并允许我们优化我们的代码，以便在另一个目录中准备好生产。

Answer 2

我会选择使用Grunt，Brunch（http://yeoman.io/）或Gulp（http://brunch.io/）的Yeoman（http://gulpjs.com/）。

从我这边，我更习惯于早午餐（因为我发现它很容易设置）你可以设置这种配置：

exports.config =
  files:
    stylesheets:
      joinTo:
        'stylesheets/app.css': /^.*/
      order:
        after: ['vendor/styles/helpers.css']

（你可以为js文件做同样的事情）

将备用样式表组合到一个文件中

2 个答案: