使用JSBuilder或Apache ANT构建Sencha Touch应用程序

Question

假设你已经用一堆视图，控制器，模型，商店，Utils等构建(编码)了MVC Sencha Touch应用程序…

为生产使用"构建"应用程序的最佳方法是什么?

任务如下:

• 连接并缩小所有JS源文件
• 连接和缩小样式表(基本上在生产环境中运行Compass)
• 删除不需要的文件夹

有人用JSBuilder或Apache Ant做过这个吗?我发现与Sencha Touch库集成的JSBuilder解决方案有很多bug，而且没有文档。Apache Ant将完全适合"更大"的构建或ci系统，如Jenkins，但我错过了如何使用Sencha Touch应用程序实现这一目标的好例子。

所以问题是，Sencha Touch的构建脚本应该是什么样的?

Answer 1

编辑:警告:这是一个老的答案，今天可能有更好的方法来做到这一点。自2011年以来，javascript的现代构建工具已经走过了漫长的道路。

我今天就这么做了。

首先我考虑使用spprockster，因为我喜欢c/c++包含定义脚本依赖的风格。

我最终使用Apache ant，因为我的一些团队成员有点害怕ruby。Apache ant似乎也是一个更通用、文档更完善的工具。

我还没有弄清楚如何自动构建sass文件，但这应该不会太难。

我使用的过程很简单:

1. 连接所有js文件并将它们放在构建文件夹
中
2. 最小化构建文件夹中的所有js文件并将它们重命名为*-min.js
3. 复制所有需要的文件到dist文件夹(包括图片，sencha-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>

如您所见，我指定了项目中的每个文件。这只是为了让顺序正确。如果你的代码写得比我的好，并且没有任何依赖关系，你可以只包含一个完整的源文件夹。