AJAX構建和部署環境特別是javascript和css分，完整版本

目前我有一個QA服務器可以運行，可以在那裏運行svn update來測試每個人都承諾顛覆的代碼。我有越來越多的JavaScript和CSS看到的問題是，分或完整版本，被編譯，如：AJAX構建和部署環境特別是javascript和css分，完整版本

構建工具：傑克
JS壓縮機：UglifyJS
CSS優化：CSSO

要麼在升級到生產服務器之前手動更新/編譯，要麼我們的svn只有最小/完整版本，但那不會太好。我看到一種方法的方式是： *將全部/拆分的css java腳本文件保存在web服務內容所在的路徑之外，subversion或trac在提交/觸發器上構建最小/完整版本。

有沒有人進一步自動化這個過程？如何分離完整的源代碼/完整版本/分鐘版本，以免搞亂最終部署？你什麼時候編譯min版本？只有在投入生產之前的最後一步？你在哪裏離開原始來源，它不能住在旁邊的Web服務其他文件，在我的例子PHP文件？

來源

2011-10-06 wolle

剛纔一直在處理類似的事情。如果我正確理解你的問題，你會希望在本地或開發環境中擁有未分類的文件，但在部署時縮小它們。當然，有許多不同的方法可以解決這個問題，目前我們正在研究一個更好的解決方案，但我會給你一個剛剛完成的項目的例子...

使用symfony 1.4，YUI Compressor和git。

我有一個symfony任務（php cli腳本）設置爲在給定的css和js文件列表上運行YUI Compressor，這些文件會被轉儲到適當目錄下的min.css和min.js中。該腳本只是將列出的文件的所有內容轉儲到一個大文件中並縮小它們。然後symfony被設置爲只使用min.js.當然，調試縮小的文件可能會很痛苦，所以另一種選擇是跳過本地或開發框的縮小，並將它們保存爲組合文件。就我個人而言，我已經將它縮小了，因爲Chrome的「漂亮打印」選項在大多數時候對我來說足夠好，儘管這不是'理想'。

我爲git創建了一個本地Post-Commit和服務器端合併後腳本，它只需運行symfony任務，以便在本地提交或在服務器上執行git pull時自動更新這些文件，因此任何更改在提交時更新js/css文件內的內容。唯一的痛點是必須手動運行minify腳本，只要你在本地更新但尚未提交。

在本地/ dev上保留非未定義代碼的替代方法需要更多的代碼，以便它具有特定的環境，這當然是可行的，但我只是對它懶惰，因爲這對於現在來說足夠好用了:)

來源

2011-10-11 18:11:42

我採用了以下基於約定的方法，對於傳統網絡開發以及移動應用程序和離線HTML5移動應用程序來說，它非常適合我。

約定

所有非精縮/完整版JS/CSS腳本命名爲.debug.js或.debug.css擴展。 實施例： global.debug.js和global.debug.css
在HTML參考非調試版本到所有JS/CSS的引用：global.js或global.css中

過程

我使用自定義的MSBuild任務來縮小JS（使用AjaxMin，但你可以使用YUI壓縮機或其他人）以下的命名約定* .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文件（我工作的完整源代碼版本）
當我構建我的項目時，glo bal.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%"^& [email protected]#^)^|findstr /O /C:"[email protected]#" ' 
) 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做過相同的操作）。

希望有幫助！

Adam

來源

2011-10-11 20:54:35 anderly

AJAX構建和部署環境特別是javascript和css分，完整版本

回答

相關問題