AJAX构建和部署环境，特别是javascript和css min，完整版本

AJAX Built and Deployment Environment especially javascript and css min, full versions

本文关键字：min 版本 css 特别是 构建 部署 环境 AJAX javascript      更新时间：2023-09-26

目前我有一个QA服务器上运行，svn update可以运行在那里测试每个人提交到subversion的代码。问题是，我看到越来越多的javascript和css的最小或完整版本得到编译，例如:

    构建工具:JakeJS压缩器:UglifyJS
  • CSS优化器:CSSO

要么必须在升级到生产服务器之前手动更新/编译，要么我们在SVN上只有最小/完整版本，但这并不是那么好。我认为一种方法是:*将完整/拆分CSS Java脚本文件放在web服务内容所在的路径之外，subversion或trac在提交/触发上构建最小/完整版本。

有人进一步自动化这个过程吗?如何分离完整源代码/完整版本/最小版本，以免搞砸最终部署?什么时候编译最小版本?只在生产前的最后一步?你在哪里留下的原始源代码，它不能住旁边的网页服务其他文件，在我的例子php文件?

我自己也在处理类似的事情。如果我正确理解您的问题，您希望在本地或开发环境中拥有未缩小的文件，但在部署时将其缩小。当然，有很多不同的方法可以做到这一点，我们目前正在研究一个更好的解决方案，但我将给你一个我刚刚完成的项目的例子…

使用symfony 1.4, YUI Compressor和git。

我有一个symfony任务(php cli脚本)设置为在给定的css和js文件列表上运行YUI Compressor，这些文件被转储到适当目录中的min.css和min.js中。该脚本只是将列出的文件的所有内容转储到一个大文件中，并将其最小化。然后symfony设置为只使用min.js。当然，调试缩小的文件可能会很痛苦，所以另一种选择是跳过在本地或开发机器上进行缩小，只将它们保存为一个组合文件。就我个人而言，我把它缩小了，因为Chrome的"漂亮打印"选项在大多数时候对我来说工作得很好，尽管它不是"理想的"。

我已经为git创建了一个本地的post-commit和服务器端的post-merge脚本，它只是运行symfony任务，所以当你在本地提交或在服务器上做git pull时，文件会自动更新，所以在js/css文件中所做的任何更改都会在提交时更新。唯一的痛点是，当您在本地更新但尚未提交时，必须手动运行miniify脚本。

在本地/dev上保留未统一代码的另一种选择将需要更多的编码，以便它是特定于环境的，这当然是可行的，但我只是懒得使用它，因为到目前为止这工作得很好:)

我采用了以下基于约定的方法，它对我来说非常适合传统的web开发以及移动应用程序和离线HTML5移动应用程序。

<<p> 约定/strong>
  • 所有非精简/完整版本的js/css脚本都以.debug.js或.debug.css扩展名命名。示例: global.debug.js和global.debug.css
  • 在html中所有对js/css的引用都引用了非调试版本:global.js或global.css

  • 我使用自定义MSBuild任务来最小化js(使用AjaxMin，但您可以使用YUI Compressor或其他)到以下命名约定*.release.js或*.release.css(例如:global.release.js)。
  • 缩成*.release.js文件后。我还有一个MSBuild任务，它调用一个简单的批处理文件(JS.bat)，该文件接受当前配置(调试或发布)，并将调试(完整源代码版本)或发布(缩小)版本复制到正常目的地。

下面是我添加到项目文件中的示例MSBuild任务，以完成最小化并调用我的批处理文件:

  <Import Project="$(MSBuildExtensionsPath)'Microsoft'MicrosoftAjax'ajaxmin.tasks" />
  <Target Name="AfterBuild">
    <ItemGroup>
      <DebugJS Include="**'*.debug.js" />
    </ItemGroup>
    <AjaxMin SourceFiles="@(DebugJS)" SourceExtensionPattern="'.debug.js$" TargetExtension=".release.js" />
    <Exec Command="JS.bat $(Configuration)" />
  </Target>

例如:

  • 我在调试模式
  • 和我有一个global.debug.js文件(我工作的完整源代码版本)
  • 当我构建我的项目时，global.debug.js被缩小为global.release.js
  • 由于我在调试模式配置，global.debug.js将被复制到global.js(这是我的html引用)，因此，当调试
    • 时，我将拥有完整的源代码版本
  • 如果我切换到发布模式配置，那么global.release.js(缩小版本)被复制到global.js，这就是我想要的发布/部署到生产环境。

下面是一个简单的批处理脚本(JS.bat)，我用它来根据传递的参数处理调试或发布脚本的副本:

@Echo off
REM ----------------------------------------------------------------------------------------
REM <summary>
REM     Script used to copy the Debug (or Release) javascript files to the runtime location
REM </summary>
REM <history>
REM     <change date="9/22/2010" author="Adam Anderly">Created</change>
REM </history>
REM ----------------------------------------------------------------------------------------
REM Grab the first argument as variable Config (Debug/Release)
SET Config=%~1
REM The loop below is used to get the Length of the Config variable
REM The Length variable is then used in the substring function on Line 22
for /f "tokens=1 delims=:" %%a in ( 
 '^(echo."%Config%"^& echo.!@#^)^|findstr /O /C:"!@#" ' 
) do set /a Length=%%a-5 + 4
FOR /R %%i IN (*.%Config%.js) DO CALL :REN "%%i"
GOTO :END
:REN
    SET File=%~f1
    REM Set File2 variable to the runtime filename (minus .debug or .release)
    CALL SET File2=%%File:~0,-%Length%%%.js
    REM First make sure the destination file is not read-only
    IF EXIST "%File2%" ATTRIB /S -R "%File2%"
    REM Finally, we copy the current debug|release file to the runtime file
    COPY /Y "%File%" "%File2%"
:END

上面的批处理脚本递归地工作，所以你可以嵌套js或css文件夹，它仍然可以工作。

当我使用MSBuild时，你当然可以使用不同的构建工具将这个批处理文件合并到你的进程中(以前我使用NAnt做了同样的事情)。

希望有帮助!

亚当

相关文章：