生产环境

生产环境

关注
发信
关注(28)粉丝(399)

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

本文介绍了包装，缓存，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. （可选）在开发过程中，它包括类似于




注意：可以使用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- 和涡轮到目前为止看起来是最好的起点：和



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




  • 是好的，但似乎有点难以

  • 让你像这样使用sintax：（不完全是最好的）我也认为我看到了补丁这个脚本，但我现在找不到它。
    （使用示例）

  • 和 Ed Eliot combine.php解决方案。它只允许您指定要合并的文件

  • 其他解决方案。

  • 使用mod_concat和其他解决方案概述

  • 这是一个WordPress插件。

  • PHP脚本，让您结合.js文件ancd combile认为Google Closure REST API。检查时间戳并在本地缓存合并的版本。

  • JS打包机压缩器/混淆器。我不知道减压需要多长时间。但它是能够收缩jQuery 1.4.2编译/缩小与Closure到50639字节从71946（几乎减少30％！）与Base62 Encode！比较gzip压缩版本会很有趣。关于JS混淆Packer优化器使你的JS代码更难以篡改。

  • 关于gzip和缓存的大讨论

  • Ruby Juicer JS / CSS打包工具



LESS编译器/教程/工具：




  • 介绍less.js（有用的注释）

  • 和这是一个LESS编译器用JS编写，也可以在浏览器中添加。非常适合发展

  • LESS是什么。最初用Ruby编写，但有很多不同的语言实现，

  • 用PHP编写的编译器较少（它似乎不更新）

  • 960是另一种方法，

  • LESS在交响乐

  • Drupal CSS预处理器

  • 一个PHP解析器类似于LESS但不完全

  • maven-less-plugin使用rhino，envjs和less.js在Maven的进程源阶段将较少代码翻译为css建立。最后你得到一个具有现成可用的CSS代码的工件。



在部署时选项：




  • Phing是构建/部署系统在PHP

  • Ruby解决方案


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中区分开发和生产环境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-29 13:32
Powered by LMLPHP ©2024 生产环境 0.041180