我想知道如何将多个 CSS/JS 请求转换为单个 HTML 请求。我将不胜感激任何帮助。谢谢!
来自
<link type="text/css" media="all" rel="stylesheet" href="//eatfresh.com/skin/m/1465294353/skin/frontend/rwd/eatfresh/css/styles.css">
<link type="text/css" media="all" rel="stylesheet" href="//eatfresh.com/skin/frontend/rwd/eatfresh/css/madisonisland.css">
<link type="text/css" media="all" rel="stylesheet" href="//eatfresh.com/skin/frontend/rwd/eatfresh/css/bootstrap.min.css">
<link type="text/css" media="all" rel="stylesheet" href="//eatfresh.com/skin/frontend/rwd/eatfresh/css/eatfresh.css">
<link type="text/css" media="all" rel="stylesheet" href="//eatfresh.com/skin/frontend/rwd/eatfresh/css/image-hover.css">
<link type="text/css" media="all" rel="stylesheet" href="//eatfresh.com/skin/frontend/rwd/eatfresh/css/font-awesome.min.css">
到
<link type="text/css" rel="stylesheet" href="//eatfresh.com/skin/m/1465294353/skin/frontend/rwd/eatfresh/css/styles.css,/skin/frontend/rwd/eatfresh/css/madisonisland.css,/skin/frontend/rwd/eatfresh/css/bootstrap.min.css,/skin/frontend/rwd/eatfresh/css/eatfresh.css,/skin/frontend/rwd/eatfresh/css/image-hover.css,/skin/frontend/rwd/eatfresh/css/font-awesome.min.css" media="all" />
最佳答案
这需要在服务器端完成，称为串联。您需要使用类似 gulp 的任务运行程序或 grunt (我更喜欢前者)。
您不能将 css 和 javascript 合并到一个文件中，您只能将所有 css 文件放入一个 css 文件中，对于 javascript 也是如此。但是，您可以使用 uglify 做一些很棒的事情，例如缩小。 , CSS autoprefixing , image minification , javascript linting ，等等。
查看此 blog post对于 gulp 和一般任务运行程序的初学者指南。
编辑
我说你“需要”使用任务运行器，那是错误的。您不需要使用一个，但您应该。我提到的这些任务可以手动完成，但任务运行器允许您使用一个命令按顺序运行它们。它使前端开发变得容易得多。
关于jquery - 在单个 http 请求中加载所有 css/js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38304335/