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 解析器...... ）。