0

多数のビュー、コントローラー、モデル、ストア、ユーティリティなどを使用してMVC Sencha Touchアプリを構築(コーディング)したと仮定します...

本番環境で使用するアプリケーションを「構築」するための最良の方法は何ですか?

タスクは次のようになります。

  • すべてのJSソースファイルを連結して縮小します
  • スタイルシートの連結と縮小(基本的に本番環境でCompassを実行)
  • 不要なフォルダを削除する

JSBuilderまたはApacheAntのいずれかを使用してこれを行った人はいますか?Sencha Touch libと統合されたJSBuilderソリューションは非常にバグが多く、文書化されていません。Apache Antは、Jenkinsのような「より大きな」ビルドシステムまたはCIシステムに完全に適合しますが、SenchaTouchアプリでこれを実現する方法の良い例がありません。

だから問題は、SenchaTouchのビルドスクリプトはどのように見えるべきかということです。

4

1 に答える 1

2

編集: 警告: これは古い回答です。今日、これを行うためのより良い方法があるかもしれません。JavaScript 用の最新のビルド ツールは、2011 年以来、長い道のりを歩んできました。

今日はまさにこれでした。

スクリプトの依存関係を定義する c/c++ インクルード スタイルが好きだったので、最初に sprockster の使用を検討しました。

チーム メンバーの何人かが Ruby をやや恐れているため、最終的に Apache ant を使用することになりました。Apache ant は、より普遍的で十分に文書化されたツールのようにも見えました。

sass ファイルを自動的にビルドする方法はまだわかりませんが、それほど難しくはないはずです。

私が使用するプロセスは簡単です:

  1. すべての js ファイルを連結し、ビルド フォルダーに配置します。
  2. ビルド フォルダー内のすべての js ファイルを縮小し、それらの名前を *-min.js に変更します
  3. 必要なすべてのファイルを dist フォルダーにコピーします (画像、sencha-touch.js、index ファイルなどを含む)

これは私が最終的に得たものです:

<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>

ご覧のとおり、プロジェクト内のすべてのファイルを指定しています。これは、順序を正しくするためです。あなたのコードが私のコードよりも優れていて、依存関係がない場合は、ソース フォルダー全体を含めることができます。

于 2011-08-06T02:02:13.087 に答える