ExtJS使用Sencha Cmd合并javascript文件为一个文件

阅读更多

1. Motivation
To reduce page load time by reducing the requests of fetching JavaScript files.

2. Creating a production build manually
Download and Install Sencha Cmd and Extjs sdk
1) Download SenchaCmd-3.1.2.342-windows.exe and ext-4.2.1-gpl.zip
2) Install SenchaCmd-3.1.2.342-windows.exe
3) Add Sencha cmd bin directory to you path, for me, C:\tools\SenchaCmd\bin\Sencha\Cmd\3.1.2.342 is added to my path
4) Extract ext-4.2.1-gpl.zip, assume the extracted folder name is C:\tools\ext-4.2.1.883

Create a new Sencha Cmd Project for getting the configuration files required to build iem-web
1) Open a command prompt
2) Change directory to C:\tools\ext-4.2.1.883
3) Enter the following command
sencha generate app IEM ProjectBuild/IEM
4) You will see a generated project named IEM under C:\tools\ext-4.2.1.883\ProjectBuild\IEM
5) Why we need this step? We want to get the configuration files required by sencha cmd for iem-web, we can easily do modification on these files instead of creating them manually.

Copy Your Project files into the Sencha Cmd Project
1) Remove app folder under ProjectBuild/IEM
2) Copy iem-web/app folder to ProjectBuild/IEM
3) Copy iem-web/IemApp.js, iemForCompile.jsp, api-debug.js, Util.js to ProjectBuild/IEM

Create a Production Build
1) Modify ProjectBuild/IEM/.sencha/app/sencha.cfg file.
a) set app.classpath=${app.dir}/app,${app.dir}/iemApp.js
b) set app.page.name=iemForCompile.jsp
2) add “skip.sass=true” to ProjectBuild/IEM/.sencha/app/production.properties
3) Open a command prompt and change directory to ProjectBuild/IEM
4) Enter the following command:
sencha app build
5) You will see the generated files under C:\tools\ext-4.2.1.883\build\IEM\production
all-classes.js and iemForCompile.jsp
6) Rename iemForCompile.jsp to iem.jsp
7) Copy the all-classes.js and iem.jsp to your tomcat
8) Open iem.jsp and do the following change
a) Change

To


b) Remove
9) Your final iem.jsp will look like this
Jsp related codes are omitted …

		
		
		
			
			
			
			
		
		
			
Loading page, please wait ... 
		
		
		

10) test your application at http://localhost:8080/iem-web/iem.jsp


3. Integrating the build with maven
Copy extjs related files and sencha cmd related files required by building process to iem-web\jsBuild folder.
Please note this step is to prepare the execution environment for iem-web, the JavaScript files of iem-web are not in this folder, and they will be copied in maven.
Run sencha generate app IEM ProjectBuild/IEM command under iem-web\jsBuild\ext-4.2.1.883 to generate an empty IEM project and the configuration files we need.
Still we don’t have the iem-web JavaScript files.
Modify configuration files as described on section “Creating a production build manually” to configure iem-web project properly.

The folder structure looks like as following screenshot:


Modify pom.xml to do the integration
1) Copy iem-web JavaScript files to jsBuild/ext-4.2.1.883/ProjectBuild/IEM/ for build

	maven-resources-plugin
	2.4.3
	
	
		
			copy-single-files-for-sench-cmd-build
			validate
			
				copy-resources
			
			
				jsBuild/ext-4.2.1.883/ProjectBuild/IEM
				
					
						src/main/webapp/
				        
				          api-debug.js
				          iemApp.js
				          iem.jsp
				          Util.js
				        
					
				
			
		
		
		
			copy-app-folder-for-sench-cmd-build
			validate
			
				copy-resources
			
			
				jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app
				
					
						src/main/webapp/app				
					
				
			
		

2) We need to do some modification, because we need to run the “sencha app build” command under jsBuild/ext-4.2.1.883/ProjectBuild/IEM folder, so we need to modify some related path in iem.jsp

    org.apache.maven.plugins
    maven-antrun-plugin
    1.7
    
        
            modify iem.jsp for build
            initialize
            
                
		
		
		
		
                
            
            
                run
            
                        
        
            copy sencha cmd output files and bankup the original jsp file
            process-sources
            
                
                	
                    
                    
                
            
            
                run
            
        
        
            modify generated js file
            process-sources
            
                
                    
                    
		  ]]>
		  
		
                
            
            
                run
            
        
    

3) Start the build by executing external command in maven or use maven execution plug-in to do this
a) By executing external command

	Creating a Production Build with Sencha Command
	generate-sources
      
          
              
              
	
	              
		
		
		
		
		
		                                    
	              
	              
		
		
		
		
		
		                                    
	              
              
          
      
      
          run
      

The content of jsBuild.bat:

@echo off
set "CURRENT_DIR=%cd%"
cd jsBuild\ext-4.2.1.883\ProjectBuild\IEM
java -Xms256m -Xmx800m -jar ../../../senchaCmd/sencha.jar app build
cd "%CURRENT_DIR%"
exit

The content of jsBuild.sh

#!/bin/bash
CURDIR=${PWD}
BASEDIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )"

echo change to project directory
cd jsBuild\ext-4.2.1.883\ProjectBuild\IEM
echo current directory is ${PWD}

echo *********************************start building js********************************
java -Xms1024m -Xmx1280m -jar ../../../senchaCmd/sencha.jar app build
echo *********************************end building js**********************************

cd ${CURDIR}
exit

b) Use maven execution plug-in

	Creating a Production Build with Sencha Command
	generate-sources
	
		
			
			
			
			
			
				
				
				
				
				
					
					
				
										
		
	
	
		run
	

The purpose of running bat or sh files is to run “sencha app build” under the specified folder jsBuild\ext-4.2.1.883\ProjectBuild\IEM, this is required by sencha cmd, otherwise they are a lot of configuration files need to adjusted and I am not sure whether we can adjust them correctly.

4) Also don’t forget to clean up the related files in a new round of building

  
	maven-clean-plugin
	
		
			
				${basedir}/src/main/resources/com
			
			
				${basedir}/src/test/resources/com
			
			
			
				${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app
			
			
				${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM
		        
		          api-debug.js
		          iemApp.js
		          iem.jsp
		          Util.js
		        
			
			
			
				${basedir}/jsBuild/ext-4.2.1.883/build/IEM
			
			
				${basedir}/src/main/webapp
		        
		          all-classes.js
		          iemc.jsp
		        
			
		
	

5) A sample pom.xml related SenchaCmd is as following:
SenchaCmd Intergration with Maven

	maven-resources-plugin
	2.4.3
	
		
			copy-single-files-for-sench-cmd-build
			validate
			
				copy-resources
			
			
				jsBuild/ext-4.2.1.883/ProjectBuild/IEM
				
					
						src/main/webapp/
				        
				          api-debug.js
				          iemApp.js
				          iem.jsp
				          Util.js
				        
					
				
			
											
		
			copy-app-folder-for-sench-cmd-build
			validate
			
				copy-resources
			
			
				jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app
				
					
						src/main/webapp/app				
					
				
			
							
	


  
	maven-clean-plugin
	
		
			
			
				${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM/app
			
			
				${basedir}/jsBuild/ext-4.2.1.883/ProjectBuild/IEM
		        
		          api-debug.js
		          iemApp.js
		          iem.jsp
		          Util.js
		        
			
			
			
				${basedir}/jsBuild/ext-4.2.1.883/build/IEM
			
			
				${basedir}/src/main/webapp
		        
		          all-classes.js
		          iemc.jsp
		        
			
		
	





















 org.apache.maven.plugins
 maven-antrun-plugin
 1.7
 
     
            modify iem.jsp for build
            initialize
            
                
		
		
		
		
                
            
            
                run
            
     

			
				Creating a Production Build with Sencha Command
				generate-sources
				
					
						
						
						
						
						
							
							
							
							
							
								
								
							
													
					
				
				
					run
				
			

        
            copy sencha cmd output files and bankup the original jsp file
            process-sources
            
                
                	
                    
                    
                
            
            
                run
            
        
            
    	  
                modify generated js file
                process-sources
                
                    
                        
                        
			  ]]>
			  
			
                    
                
                
                    run
                
    	  
    	
      
          
              ant-contrib
              ant-contrib
              20020829
          
                      

4. Frequent build failure error
1) Try not code in the following way
Ext.define(‘YourClass’,{
     name:’hello’,
     store: Ext.create(‘StoreClass’);
});

Try to instantiate store in initComponent method
2) Missed some required class
3) Required class is in all-classes.js, but its definition after its usage

• 
• 大小: 72 KB

• 查看图片附件