Is there a way to minify an ExtJS application with

问题:

I have an existing ExtJS app developed using ExtJS 4.2.1. I am using Closure minifier through Maven plugin minify-maven-plugin. The generated minified JS files (without merge) works fine. However, generated merged minified file throws undefined errors because the definition comes later in the merged file. My question is, is there a way I can figure out the order I have to provide the plugin? (I don't want to use Sencha Cmd)

The app folder follows the structure

app/common, app/controller, app/model, app/proxy, app/store, app/utils, app/view

At the moment this is how I have defined the build process in Maven POM file

<plugins>
        <plugin>
            <groupId>com.samaxes.maven</groupId>
            <artifactId>minify-maven-plugin</artifactId>
            <version>1.7.4</version>
            <executions>
                <execution>
                    <id>default-minify</id>
                    <phase>prepare-package</phase>
                    <goals>
                        <goal>minify</goal>
                    </goals>
                    <inherited>false</inherited>
                    <configuration>
                        <charset>UTF-8</charset>
                        <!--  <skipMerge>true</skipMerge> -->
                        <webappSourceDir>${basedir}/src/main</webappSourceDir>
                        <jsSourceDir>js/app</jsSourceDir>
                        <jsTargetDir>js/app</jsTargetDir>
                        <jsEngine>CLOSURE</jsEngine>
                        <closureLanguage>ECMASCRIPT5</closureLanguage>
                        <closureAngularPass>true</closureAngularPass>
                        <nosuffix>true</nosuffix>
                        <webappTargetDir>${project.build.directory}</webappTargetDir>
                        <jsSourceIncludes>
                            <jsSourceInclude>**/*.js</jsSourceInclude>
                        </jsSourceIncludes>
                    </configuration>
                </execution>
            </executions>
        </plugin>

回答1:

Why dont use Sencha Cmd? It does exactly what you want!

Maybe it helps if you know that you can use Sencha Cmd without the Sencha application structure. If you want only merge the files use the concatenate cmd.

If you really dont want use Sencha Cmd, then you have to take care of all the extends, requires, mixins and so on... and I would not recommend this!

For example use Sencha Cmd with manual paths and exclude the extjs classes

sencha compile --classpath=myApp/src,extjs/src -debug=false exclude -all and include -namespace MyApp.* and concat bundle.js

the extjs/src path is the path where your extjs classes are

回答2:

Since your question is about the order of of files for minification, providing that information below:

We had a similar requirement, where I could not use Sencha cmd as it is to minify files, so created jsb file on my own [I know this is not recommended :( ].

What I did was, created below jsb file [please note: sequence of files is very important]:

{
"projectName": "ProductName",
"builds": [
/** This file is for production purpose **/
    {
        "name": "ProductName - Production",
        "target": "all-app.js",
        "compress": true,
        "files": [
        /** utils **/

            {
                "path": "app/util/",
                "name": "util.js"
            }
        /** models **/
            {
                "path": "app/model/",
                "name": "MyModel.js"
            },
        /** stores **/
            {
                "path": "app/store/",
                "name": "MyStore.js"
            },

        /** custom components  **/

            {
                "path": "resources/ux/form/",
                "name": "MySearchField.js"
            },
        /** views **/
            {
                "path": "app/view/admin/",
                "name": "MyView.js"
            },
        /** controllers **/
         {
                "path": "app/controller/",
                "name": "Window.js"
         },
        /** app.js **/

         {
                "path": "",
                "name": "app.js"
         }
        ]
    },
    /** This file is for debug purpose **/
    {
        "name": "ProductName - debug",
        "target": "all-app-debug.js",
        "compress": false,
        "files": [
        /** utils **/

            {
                "path": "app/util/",
                "name": "util.js"
            }
        /** models **/
            {
                "path": "app/model/",
                "name": "MyModel.js"
            },
        /** stores **/
            {
                "path": "app/store/",
                "name": "MyStore.js"
            },

        /** custom components  **/

            {
                "path": "resources/ux/form/",
                "name": "MySearchField.js"
            },
        /** views **/
            {
                "path": "app/view/admin/",
                "name": "MyView.js"
            },
        /** controllers **/
         {
                "path": "app/controller/",
                "name": "Window.js"
         },
        /** app.js **/

         {
                "path": "",
                "name": "app.js"
         }
        ]
    }
],
"resources" : []

}

If you create a minified file using above sequence, it will work in your case as well.

Hope this help. Thanks!