大廈煎茶觸摸應用與JSBuilder或Apache ANT

Question

假設你已經建立（編碼），你的MVC煎茶觸摸應用程序與一羣視圖，控制器，模型，商店，utils的等......

最新最好的辦法「建立」生產應用程序？

任務是：

• 的毗連和縮小所有的JS源文件
• 的毗連和縮小樣式表（基本上與生產環境中運行北斗）
• 刪除不需要的文件夾

有任何人使用JSBuilder或Apache Ant完成這項工作？我發現JSBuilder解決方案與Sencha Touch lib集成在一起很麻煩並且沒有文檔。 Apache Ant完全適合像詹金斯這樣的「更大」的構建或CI系統，但我錯過了一個很好的例子，即如何通過Sencha Touch應用程序實現這一點。

所以問題是，Sencha Touch的構建腳本應該怎麼樣？

Answer 1

編輯：警告：這是一箇舊的答案，今天可能有更好的方法來做到這一點。 JavaScript的現代構建工具自2011年以來已經走過了很長的一段路。

我今天確實做了這件事。

首先我考慮使用sprockster，因爲我喜歡定義腳本依賴關係的c/C++ include風格。

我結束了使用Apache螞蟻，因爲我的一些團隊成員有點害怕紅寶石。 Apache螞蟻似乎也是一個更通用和有據可查的工具。

我還沒有想出如何自動創建sass文件，但這不應該太難。

我使用的過程是一種簡單的：

1. 串連所有js文件，並將它們在build文件夾
2. 縮小所有的JS文件build文件夾中併爲其重新命名* -min.js
3. 複製所有必需的文件到dist文件夾（包括圖像，煎茶，touch.js，索引文件等）

這是我結束了：

<project name="ProjectApp" default="dist" basedir="."> 
    <description> 
     Project Manager build file 
     dist-debug is the target that's best for debugging 
     Run ant dist-debug to build the project 
    </description> 
    <!-- set global properties for this build --> 
    <property name="src" location="src"/> 
    <property name="lib" location="lib"/> 
    <property name="build" location="build"/> 
    <property name="dist" location="dist"/> 
    <property name="utils" location="utils"/> 
    <property name="img" location="img"/> 

    <target name="init"> 
     <!-- Create the build directory structure used by compile --> 
     <mkdir dir="${build}"/> 
    </target> 

    <target name="concatenate" depends="init" description="Concatenate all js files"> 
     <concat destfile="${build}/application.js" fixlastline="yes"> 
      <fileset file="${src}/js/app.js" /> 
      <fileset file="${src}/js/observablize.js" /> 
      <fileset file="${src}/js/config.js" /> 

      <!-- Models --> 
      <fileset file="${src}/js/models/Project.js" /> 
      <fileset file="${src}/js/models/ProjectInformation.js" /> 
      <fileset file="${src}/js/models/Picture.js" /> 
      <fileset file="${src}/js/models/Milestone.js" /> 
      <fileset file="${src}/js/models/Risk.js" /> 
      <fileset file="${src}/js/models/data.js" /> 
      <fileset file="${src}/js/models/Invoice.js" /> 
      <fileset file="${src}/js/models/Customer.js" /> 
      <fileset file="${src}/js/models/OpenItem.js" /> 
      <fileset file="${src}/js/models/favorites.js" /> 
      <fileset file="${src}/js/models/mockObjects.js" /> 

      <!-- Database --> 
      <fileset file="${src}/js/database/createTables.js" /> 
      <fileset file="${src}/js/database/database.js" /> 
      <fileset file="${src}/js/database/projectObserver.js" /> 

      <!-- Network --> 
      <fileset file="${src}/js/network/network.js" /> 
      <fileset file="${src}/js/network/queries.js" /> 
      <fileset file="${src}/js/network/parseProjectServiceProject.js" /> 
      <fileset file="${src}/js/network/parseQueryEngineProjects.js" /> 
      <fileset file="${src}/js/network/parseDocArchiveSearchResponse.js" /> 
      <fileset file="${src}/js/network/parseDocArchiveDataResponse.js" /> 
      <fileset file="${src}/js/network/parseQueryEngineInvoices.js" /> 
      <fileset file="${src}/js/network/parseQueryEngineCustomer.js" /> 

      <!-- Views --> 
      <fileset file="${src}/js/views/Viewport.js" /> 
      <fileset file="${src}/js/views/XTemplates.js" /> 
      <fileset file="${src}/js/views/Login.js" /> 
      <fileset file="${src}/js/views/ProjectList/ActionSheet.js" /> 
      <fileset file="${src}/js/views/ProjectList/ProjectView.js" /> 
      <fileset file="${src}/js/views/ProjectList/ProjectList.js" /> 
      <fileset file="${src}/js/views/ProjectList/ProjectsLists.js" /> 
      <fileset file="${src}/js/views/ProjectInfo.js" /> 
      <fileset file="${src}/js/views/ProjectRisks.js" /> 
      <fileset file="${src}/js/views/ProjectMilestones.js" /> 
      <fileset file="${src}/js/views/ProjectDetail.js" /> 
      <fileset file="${src}/js/views/Overlays.js" /> 

      <!-- Controllers --> 
      <fileset file="${src}/js/controllers/login.js" /> 
      <fileset file="${src}/js/controllers/projects.js" /> 
     </concat> 
    </target> 

    <target name="compress" depends="concatenate" description="Compress application.js to application-min.js"> 
     <apply executable="java" parallel="false"> 
      <filelist dir="${build}" files="application.js" /> 
      <arg line="-jar" /> 
      <arg path="${utils}/yuicompressor-2.4.6.jar" /> 
      <srcfile /> 
      <arg line="-o" /> 
      <mapper type="glob" from="*.js" to="${build}/*-min.js" /> 
      <targetfile /> 
     </apply> 
    </target> 

    <target name="dist-debug" depends="concatenate" description="generate the distribution"> 
     <!-- Create the distribution directory --> 
     <mkdir dir="${dist}"/> 

     <!-- copy over the required files --> 

     <!-- required libraries --> 
     <!-- sencha touch --> 
     <copy file="${lib}/sencha-touch/sencha-touch.js" todir="${dist}"/> 

     <!-- stylesheet --> 
     <copy file="${build}/application.css" todir="${dist}"/> 

     <!-- index file --> 
     <copy file="${src}/index.html" todir="${dist}"/> 

     <!-- manifest file --> 
     <copy file="${src}/cache.manifest" todir="${dist}"/> 

     <!-- app javascript --> 
     <copy file="${build}/application.js" tofile="${dist}/application.js"/> 

     <!-- images --> 
     <copy file="${img}/icon.png" todir="${dist}"/> 
     <copy file="${img}/startup.png" todir="${dist}"/> 
     <copy file="${img}/disclosure.png" todir="${dist}"/> 

    </target> 

    <target name="dist" depends="dist-debug,compress" description="generate minified distribution"> 
     <!-- app javascript --> 
     <copy file="${build}/application-min.js" tofile="${dist}/application.js"/> 
    </target> 

    <target name="clean" description="clean up" > 
     <!-- Delete the ${build} and ${dist} directory trees --> 
     <delete dir="${build}"/> 
     <delete dir="${dist}"/> 
    </target> 

</project> 

正如你所看到的，我指定了我的項目中的每一個文件。這只是爲了獲得正確的訂單。如果你的代碼比我的代碼寫的更好，並且沒有任何依賴關係，那麼你可以包含整個源代碼文件夾。