包装，缓存，JS和CSS在PHP中区分开发和生产环境 [英] Packing, caching, JS and CSS in PHP that differentiate between development and production environment

查看：253
本文介绍了包装，缓存，JS和CSS在PHP中区分开发和生产环境的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想让开发简单，并在生产中高度优化产出。



我想要做的是：




  • 快速制作生产页面 Google Page Speed 和 YSlow 返回最佳分数。这意味着：


    1. 组合和压缩 JS文件和CSS，并将组定位到正确的位置（页面的底部或顶部）。对于.js Google Closure似乎是最好的选择。

    2. .JS和.CSS巧妙地缓存，但确保在.JS或CSS时重新加载componet更新。 301文件未更改等。

    3. 缓存类型：我认为磁盘上的缓存很好。考虑APC和Memcache或Redis，如果他们显着提高速度。

    4. 能够指定和使用延迟加载 .JS必要时或至少不阻止页面


    5. 进行网站开发：


      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）。 默认生成

        • 轻松设置缓存文件夹和源文件夹 b

      2. 使用LESS 可使CSS开发更少。在开发中使用 LESS.js 在生产中自动编译LESS文件，以便每次在开发中更改.less文件时，都会在服务器上更新。

      3. （可选）在开发过程中，它包括类似于 https上的shell的JS和LESS控制台：//www.squarefree.com/bookmarklets/webdevel.html




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



有什么事情吗？



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



我想要：



一个php函数可以这样使用： pack_js（['first.js'，'second.js'，'third.js']）写成：



在开发服务器上：

 < script type =text / javascriptsrc = js / first.js>< / script> 
< script type =text / javascriptsrc =static / js / second.js>< / script> 
< script type =text / javascriptsrc =static / js / third.js>< / script>

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

 < script type =text / javascriptsrc =cache / 12a42323bfe339ea9w.js>< / script&

另一个函数： pack_css（['first.less'，'second.less'



在开发服务器上：



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

< script type =text / javascriptcharset =utf-8>
less.env =development;
less.watch（）;
< / script>

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

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

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



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



欢迎每个建议。

解决方案

仍在使用已有的资源探索最佳解决方案。



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



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





JS压缩和缓存的资源：

LESS编译器/教程/工具：





在部署时选项：




I am trying to make development easy and have highly optimized output in production.

The goals of what I am trying to do is:

  • Make production pages fast! I would like that the Google Page Speed and YSlow return the best scores. This means:

    1. Combine and compress JS files and CSS and position the group in the right place (bottom or top of the page) in the HTML. For .js Google Closure seems the best choice.
    2. .JS and .CSS are smartly cached but be sure that they get reloaded when of the .JS or CSS componet is updated. 301 File not changed etc.
    3. Cache type: I think cache on disk is fine. Consider APC and Memcache or Redis if they significantly improve speed.
    4. Capable to specify and use lazy load of .JS when necessary or at least not to block the page rendering.
    5. (Optional) Compress the HTML too.

  • Make website development easy:

    1. Use short command in the .php file when you want to include .js or .css and compress them only in the production environment
      • Use syntax like pack_js(['first.js', 'second.js' 'third.js']) and pack_css(['first.less', 'second.less' 'third.css'], true)
      • It is easy to configure develpment or production environment. Maybe just a call to SetDebug(true or false). Default production
      • Easy to set up cache folders and source folders
    2. Use of LESS to make CSS development sucks less. Automatically compile LESS files in CSS in production but use of LESS.js in development so that each time you change the .less file in development it is updated on the server.
    3. (optional) In development it includes a JS and a LESS console similar to the shell at https://www.squarefree.com/bookmarklets/webdevel.html

Note: it is OK to use Apachee modules and .htaccess files if they significantly speed up the process. But it should be able to set them up quicky, ideally with just a setup command.

Is there something that do this? Or what are the best resources to start?

I would prefer a solution that consists of a PHP script (eventually few .php files, .htaccess and compressing executables) that compresses the .JS with the Google Closure Compiler and compress/compile the CSS/LESS files stripping out useless comments and white spaces. A special cookie could be used on production server to output the development version.

I would like to have:

A php function usable like this: pack_js(['first.js', 'second.js', 'third.js']) that write something like:

On developments servers:

<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>

On production servers (if the special cookie is not present):

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

Another function: pack_css(['first.less', 'second.less', 'third.css'], true) that write something like:

On developments servers:

<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>

On production servers (if the special cookie is not present):

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

the second parameter specify if the less.js should be output on the development server

Obviously 12a42323bfe339ea9w.js and 46537a8b8e876f7a8e7.css are the optimized, packed and compiled version of the script. This solution should be able to detect when a source file change and recompile the scripts for production. It should be configurable to regarding locations of the script and type of caching (disk is fine). Ideally the pack_js should probably have an option to make possible lazy load of the js in production.

Every suggestion is welcomed.

解决方案

Still working on exploring the best solution leveraging the resource already available.

CSS-JS-Booster and Turbine so far looks like the best starting point: http://github.com/Schepp/CSS-JS-Booster and http://turbinecss.org/

Other JS/CSS Combiners solutions and articles

Resource for JS compression and caching:

LESS compilers/tutorials/tools:

At Deployment time options:

这篇关于包装，缓存，JS和CSS在PHP中区分开发和生产环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
PHP最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆