PHP中的打包，缓存，JS和CSS，区分开发和生产环境

Question

我正在努力使开发变得简单并且在生产中具有高度优化的输出。

我想要做的目标是：

• 快速制作生产页面！ 我希望Google Page Speed和YSlow能够获得最佳分数。 这意味着：
  1. 组合并压缩 JS文件和CSS， 并将组定位在HTML中的正确位置（页面的底部或顶部）。 对于.js谷歌关闭似乎是最好的选择。
  2. .JS和.CSS是智能缓存的，但请确保在更新.JS或CSS组件时重新加载它们。 301文件未更改等
  3. 缓存类型 ：我认为磁盘上的缓存很好。 如果它们显着提高速度，请考虑APC和Memcache或Redis。
  4. 能够在必要时指定和使用.JS的延迟加载 ，或者至少不阻止页面呈现。
  5. （可选）也压缩HTML。
• 简化网站开发 ：
  1. 如果要包含.js或.css并在生产环境中仅压缩它们，请在.php文件中使用short命令
     • 使用类似pack_js（['first.js'，'second.js''third.js']）和pack_css（['first.less'，'second.less''third.css']，true的语法）
     • 很容易配置开发或生产环境。 也许只是调用SetDebug（true或false） 。 默认生产
     • 轻松设置缓存文件夹和源文件夹
  2. 使用LESS使CSS开发变得更少。 在生产中自动编译CSS中的LESS文件，但在开发中使用LESS.js ，这样每次在开发中更改.less文件时，它都会在服务器上更新。
  3. （可选）在开发中，它包括一个JS和一个LESS控制台，类似于https://www.squarefree.com/bookmarklets/webdevel.html上的shell

注意：如果Apachee模块和.htaccess文件显着加快了进程，则可以使用它们。 但它应该能够快速设置它们，理想情况下只需要一个设置命令。

有没有做到这一点？ 或者什么是最好的资源开始？

我更喜欢一个由PHP脚本（最终几个.php文件，.htaccess和压缩可执行文件）组成的解决方案，它使用Google Closure Compiler压缩.JS并压缩/编译CSS / LESS文件，删除无用的注释和空格。 可以在生产服务器上使用特殊cookie来输出开发版本。

我想拥有：

一个像以下那样可用的php函数： pack_js（['first.js'，'second.js'，'third.js']） ，它们写成：

在开发服务器上：

<script type="text/javascript" src="static/js/first.js"></script>
<script type="text/javascript" src="static/js/second.js"></script>
<script type="text/javascript" src="static/js/third.js"></script>

在生产服务器上（如果不存在特殊cookie）：

<script type="text/javascript" src="cache/12a42323bfe339ea9w.js"></script>

另一个函数： pack_css（['first.less'，'second.less'，'third.css']，true）写下：

在开发服务器上：

<link rel="stylesheet/less" href="/static/css/first.less" type="text/css" />
<link rel="stylesheet/less" href="/static/css/second.less" type="text/css" />
<link href="/static/css/third.css" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

<script type="text/javascript" charset="utf-8">
    less.env = "development";
    less.watch();
</script>

在生产服务器上（如果不存在特殊cookie）：

<link href="/cache/46537a8b8e876f7a8e7.css" type="text/css" />

第二个参数指定是否应在开发服务器上输出less.js

显然12a42323bfe339ea9w.js和46537a8b8e876f7a8e7.css是脚本的优化，打包和编译版本。 此解决方案应该能够检测源文件何时更改并重新编译脚本以进行生产。 它应该可以配置为关于脚本的位置和缓存类型（磁盘很好）。 理想情况下，pack_js应该可以选择在生产中对js进行延迟加载。

每个建议都受到欢迎。

Answer 1

仍在努力探索利用现有资源的最佳解决方案。

到目前为止CSS-JS-Booster和Turbine看起来是最好的起点： http ： //github.com/Schepp/CSS-JS-Booster和http://turbinecss.org/

其他JS / CSS Combiners解决方案和文章

• http://code.google.com/p/minify很好，但似乎有点难以配置。
• http://rakaz.nl/code/combine让你像这样使用sintax： http ：//www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js（不完全是最好的）我也认为我看到了这个脚本的补丁，但我现在找不到它。 （使用示例http://brainfart.com.ua/post/code-cache-combine/ ）
• http://www.ejeliot.com/blog/72和http://www.ejeliot.com/samples/combine/combine.phps Ed Eliot combine.php解决方案。 它只允许您指定一次要合并的文件
• http://aciddrop.com/php-speedy/其他解决方案。
• http://www.artzstudio.com/2008/08/using-modconcat-to-speed-up-render-start/使用mod_concat及其他解决方案概述
• http://wordpress.org/extend/plugins/w3-total-cache/这是一个WordPress插件。 这是非常有趣的，但可能需要做很多工作才能使它独立于Wordpress。
• http://bakery.cakephp.org/articles/view/combine-your-js-css-files-for-faster-loading CakePHP解决方案

JS压缩和缓存的资源：

• http://code.google.com/p/php-closure/ PHP脚本可让您将.js文件与acd组合在一起，以及Google Closure REST API。 检查时间戳并在本地缓存组合版本。
• http://dean.edwards.name/download JS packer压缩器/混淆器。 我不确定减压需要多长时间。 但它能够通过Base62 Encode将使用Closure编译/缩小的jQuery 1.4.2从71946缩小到50639字节（几乎减少30％！）！ 比较gzip压缩版本会很有趣。 关于JS混淆Packer优化器使得篡改JS代码变得更加困难。
• http://thinkvitamin.com/dev/serving-javascript-fast/关于gzip和缓存的很好的讨论
• http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool Ruby Juicer JS / CSS打包工具

较少的编译器/教程/工具：

• http://designshack.co.uk/articles/css/using-less-js-to-simplify-your-css3 Less.js教程/介绍。
• http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-you-need-to-check-out-less-js less.js的介绍（有用的评论）
• http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/和http://github.com/cloudhead/less.js这是一个用JS编写的LESS编译器，也可以添加到浏览器。 非常适合发展
• http://lesscss.org/少有什么。 最初是用Ruby编写的，但是在很多不同的语言中都有实现，
• http://leafo.net/lessphp/用PHP编写的较少的编译器（它似乎没有更新）
• 960是让事情变得更容易的另一种方式; http://www.webdesignerdepot.com/2010/03/fight-div-itis-and-class-itis-with-the-960-grid-system/
• http://github.com/everzet/sfLESSPlugin在交响乐中很少
• http://drupal.org/project/less Drupal CSS预处理器
• http://github.com/sunny/csscaffold类似于LESS但不完全的PHP解析器
• http://code.google.com/p/maven-less-plugin/maven-less-plugin使用rhino，envjs和less.js在maven构建的流程源阶段将较少代码转换为css。 最后，您将获得具有即用型css代码的工件。

在部署时选项：

• http://phing.info/docs/guide/stable/ Phing是PHP中的构建/部署系统
• http://www.capify.org/index.php/Capistrano Ruby解决方案

Answer 2

为什么不使用项目构建系统将应用程序部署到生产服务器上呢？ 对于PHP，您可能会喜欢Phing ，因为它允许您在PHP中编写额外的插件，您可以在部署时执行。 你可能想要考虑的其他选择是Ant和Capistrano （还有很多其他的），但这些需要其他语言的知识（如果你真的想要，你可以从他们那里启动php解析器...... ）。

Answer 3

好问题！

我使用过具有类似要求的流程，但我们采取了一些不同的方法。 我意识到它可能并不完全是你所追求的，但仍会提出一些建议：

1. 制作运输过程中的压缩/编译部分。（您可能已经这样做了，但从上面不清楚）。
2. 在开发服务器上压缩/编译它。 它可能是调试/测试的麻烦，但您希望能够确保生产版本和测试版本尽可能相似。 如果你有多个开发阶段的奢侈品，那么你可以压缩其中一个。
3. 只有在通过某种质量扫描时才进行压缩/编译（例如jslint ）
4. 不要组合模块 - 将它们分开。 您将获得的性能优势可以忽略不计，几乎毫无意义。
5. 不要更改HTML，只需更改依赖模块内容即可。

我意识到它与你的意图有点不同，但根据我的经验，它会导致更强大的开发促销模型。