首页 > 代码库 > Sencha Touch 手机移动开发框架 HTML5 项目压缩方案 (一);
Sencha Touch 手机移动开发框架 HTML5 项目压缩方案 (一);
Sencha Touch框架生成基本项目目录结构
Index.html/App.jsApp.json/touch[sdk]/ /Sencha-touch.js /srcResources/App/
app.js以及app.json 是程序的入口点及基本加载配置;
/touch[sdk]
sencha-touch[debug|min...].js 是 SDK 文件
/src 这里是存放组件的位置
Resources/用于存放 样式及图片等资源文件;
app/用于存放我们编写的程序源码;
压缩优化目标
把app/ , app.js , sdk[touch/sencha-touch.js], components[touch/src]分开压缩
再对app/ 各自模块进行压缩!
Sencha Touch compile编译研究
>sencha compile >[-cl=touch/src,app] //这个不必写,不然生成出来的文件,会很大,估计是重复拼接的原因.>-ig=app.js,app/view //这里可以写文件,或是文件夹都可以>concat –yui jsoutfile.js
以上需要具有 Sencha touch 编译命令行环境下运行;
按需加载压缩方式:
获取依赖组件命令:
sencha compile –cl=touch/src,app meta –filenames –out filenames.txt
将获取的列表中把 app.js, app/下所有脚本去除;
采用 YUI Compressor加密压缩这些dependencies文件合并后的文件; 采用批处理命令先合并为一个大文件;
Union.bat
@echo off set /p outFile=请填写输出文件名: set /p fList=请填写合并列表文件: for /f %%i in (%fList%) do ( for /f "delims=" %%j in (%%i) do echo %%j >> %outFile%)java -jar D:\software\YUI-Compass\yuicompressor-2.4.2\build\yuicompressor-2.4.2.jar --type js --charset utf-8 %outFile% -o %outFile%
这种方法,会出现汉字乱码,会出现双引号异常.
//修改
要不出现乱码,及双引号问题,只能copy命令:
Copy命令可以拷贝其他文件夹的文件, 但只支持 \ 的路径, [/这种不支持];
for /f "delims=" %%j in (%%i) do echo %%j >> %outFile%###改为:copy "%outFile%"+"%%i" %outFile%
但这样也会出现一些特殊的符号出来,需要手动改掉;
这种情况下,按需合并的结果为 788KB , 原来有 2956KB [1/4]; 这是除 app.js 以及 app/ 下脚本的压缩结果;
把压缩后的文件, 放在sdk [sencha-touch.js] 之下
发现有错误, sencha-touch.js加载后,会默认的引用touch/src下的一些必须依赖文件;
在文件中如果使用到类型Ext.xxx.Component的地方,默认的加载方式还是为/touch/src/xx/xx 这样的地址;
想要把组件+SDK与我们写的app文件夹脚本以及app.js分开,这种方式有点困难!
Touch/src下全压缩方式
其实按需压缩,对于一个差不多点大的项目,所使用到依赖组件都几本上都用到,整个touch/app组件库是3M左右,按需获取的依赖文件也是3M左右。
所以可以压缩所有组件来使用。
使用grunt=> /touch/src全压缩方式,不采用依赖方式
Concat: { Dist: { Src:’build/**/*.js’, Dest:’build/components.js’ }},Uglify: { Build: { Src:’build/components.js’, Dest:’build/components.min.js’ }, Dist: { Files: { ‘build/sencha.min.js’:’touch/sencha-touch.js’ } }}
Concat 看字就可以知道是什么意思,他表示联合起来的意思,这里是把脚本文件都联接起来,/build/**/*.js 表示 build 下的所有文件;
Dist 可以不用管,这是一个自定义的词,表示一个要执行的任务名称;
src代表脚本文件,或集合;
Dest: ‘build/components.js‘ ; 表示把 src 集合 联接成 未压缩的 components.js 文件;
Uglify 表示压缩配置;
下面有两个任务:build, Dist;
build 的任务是把 上面联合起来的文件 components.js 压缩成 components.min.js;
Dist 下的 Files 可以配置多个执行项,是个 json 格式数据;Files:{outfile: file}, 把Value 代码的文件,压缩成 key 所指定的 outfile;
这样压缩出来的组件文件 components.min.js 大小为: 760kb,sdk文件sencha.min.js为122kb;
创建 grunt-Sencha_ZOrderCompress 插件过程;
按顺序压缩指定Sencha加载的脚本文件, 可以选择多种模式压缩;
grunt-sencha-zordercompress分按需压缩与全压缩两种方式;
每种方式下又可以分:
- APP_APPJS_ADKCOMS : 压缩两份: apps/下的文件, 以及 sdk+components的文件
- APP_APPJS_ADK_COMS : 压缩三份 : apps/下的文件, 以及 sdk文件 和 components文件三部分.
- 每种模式都可以全压缩
所有配置出来的可压缩项为:
全压缩: ‘<%=Sencha_ZOrderCompress_dist%>‘
组件或组件加sdk: ‘<%=Sencha_ZOrderCompress_dist_ext_core%>‘
apps/下文件压缩: ‘<%=Sencha_ZOrderCompress_dist_apps%>‘;
详见:https://github.com/gloot/grunt-sencha-zordercompress
1. grunt 命令行 转到项目根目录 /node_modules 下;
2. 使用
npm install –g grunt-init
安装grunt-init;
3. 第二安装github工具.
Git,Windows下的Git,地址:http://msysgit.googlecode.com/files/Git-1.7.9-preview20120201.exe
git、CopSSH安装可以参照(注意:看图片就好了其它的无视): http://www.codeproject.com/Articles/296398/Step-by-Step-Setup-Git-Server-on-Windows-with-CopS ;
这样就可以了,CopSSH可以不用安装;
再用 执行:
git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin
4. 安装gruntplugin模板
转到目标项目根目录,如果已经存在node_modules,就转到node_modules下;
>md 项目文件夹名[grunt-sencha-zorderCompress]>cd grunt-sencha-zorderCompress>grunt-init gruntplugin #[在这个文件下创建grunt插件模板]#
接下来是做些配置,最后生成一个标准的 grunt 插件模板;
5. 接下来给 grunt-sencha-zorderCompress 插件内再添加辅助插件 [自动生成node_modules]
>Npm install grunt-lib-phantomjs>Npm install phantomjs #[会生成phantomjs与.bin文件夹]#>Npm install connect
在package.json添加dependencies节点 包含上面三个插件;
"dependencies": { "grunt-lib-phantomjs": "~0.4.0", "phantomjs": "1.9.2-1", "connect": "~2.9.0" },
生成结构:
刚才配置的项目名为: Sencha_ZOrderCompress
模板生成后会在 grunt-sencha-zorderCompress/task 下生成一个 Sencha_ZOrderCompress.js 文件;
内容大概为:
‘use strict’;Module.exports = function(grunt) { Grunt.registerMultiTask(‘Sencha_ZOrderCompress’, ‘plug description’, function() { //do… //在这里有 方法内的 this对象. //可以运行[gruntfile.js] grunt.registerTask (‘xxx’, [‘Sencha_ZOrderCompress’]); //所指定节点的数据 });};
这里的gruntfile.js里 Sencha_ZOrderCompress 的配置为:
GetSenchaOrderAllComponents: { dist: { options: { appJs : ‘app.js’, processHtml:’index.html’ } }}
那么. Sencha_ZOrderCompress.js 的 Grunt.registerMultiTask 内,就可以获取 options的配置项:
Var options = this.options({});
Sencha_ZOrderCompress.js 代码:
/* * Sencha_ZOrderCompress * http://www.cmszu.com * * Copyright (c) 2013 Gloot/ZWD * Licensed under the MIT license. */‘use strict‘;var path = require("path"), depenconfig = require(__dirname + path.sep + ‘sencha_grunt_set.js‘), depenHolder = require(__dirname + path.sep + ‘sencha_phantomjs_holder.js‘), allcomponents = [];module.exports = function(grunt) { // Please see the Grunt documentation for more information regarding task // creation: http://gruntjs.com/creating-tasks function getOptions(instance) { return instance.options({}); } function setOtherComponentsInOrder(files) { for (var i=0; i<allcomponents.length; i++) { var hasIn = false; var jspath = allcomponents[i]; for (var j=0; j<files.length; j++) { if (jspath.toLowerCase() == files[j].toLowerCase()) { hasIn = true; break; } } if (hasIn == false) { //grunt.log.writeln(‘Else files: ‘ + jspath); files.push(jspath); } } return files; } grunt.registerMultiTask(‘Sencha_ZOrderCompress‘, ‘Compress compile sencha by order Loaded javascript files!‘, function() { // Merge task-specific and/or target-specific options with these defaults. var me = this, options = getOptions(me), done = me.async(); grunt.log.writeln( ‘Start Task: === Sencha_ZOrderCompress‘ ); var holder = new depenHolder(options.processHtml, options.appName, options.mode, options.compassAll); holder.setGrunt(grunt); me.files.forEach(function(f) { //important var coms = f.src.filter(function(filepath) { //grunt.log.writeln(‘component files: ‘ + filepath); allcomponents.push(filepath); }); }); var usecoms = options.compassAll ? allcomponents : []; holder.getDependencies(function(files, sencha) { grunt.log.writeln( ‘Task Target:===================================‘ + me.target); //out dist depenconfig(files, grunt, ‘Sencha_ZOrderCompress_‘+me.target, options.mode, sencha, options.moduFunc); done(); }, usecoms); });};
要想像下面的调用脚本方法:
depenconfig = require(__dirname + path.sep + ‘sencha_grunt_set.js‘),depenHolder = require(__dirname + path.sep + ‘sencha_phantomjs_holder.js‘),
脚本文件,就需要 如果下的写法:
//脚本必须为://1 形式:Module.exports = function(aaa,bbb,..) { }//2 形式:Function afuncName(aaa,bbb,…) {}Module.exports = afuncName;//3 形式:Function classfunc(aaa, bbb,…) { This.aaa = aaa; ….}classfunc.prototype.method = function() {}Module.exports = classfunc;
require 才能这样加载一个脚本文件;(grunt模块|插件|中间件)可使用:var xxxx = require(__dirname + path.sep + 脚本文件来获取);
Grunt 需要了解一些知识跟常用组件;
1>. 了解 Nodejs Path模块: var path = require(‘path’);
http://lnmp.in/nodejs-path 路径拼接组合,返回标准化的路径;
2>. 了解 Nodejs connect模块: var connect = require(‘connect’);
轻量级架设服务器的Nodejs中间件组件.
http://deadhorse.me/nodejs/2011/11/26/nodejs_connect_analysis_1.html
3>. 在 gruntfile.js 部分:
Grunt.initConfig({ TaskName : { Dist: { //xxxx } }});
其下有src/dest等属性
Src 为配置的文件路径, 该路径可正则匹配所有的文件
/*.js 代表某文件夹下的所有.js文件
/**/*.js 代表某文件夹及其所有子文件夹下的所有.js文件
返回所有文件数组为:
this.files.forEach(function(f) { var files = f.src.filter(function(filepath) { //filepath即为src设定下的文件列表的其中一个文件. });});
Dist下的配置项可以通过如果方式获取:
这里是options:
//这是在 TaskName 所在文件 TaskName.js的 grunt.registerMultiTask 里
Var options = instance.options({}); //可以instance.options的json部分再添加字段属性.
TaskName.js 即为上面 Sencha_ZOrderCompress.js 文件;
设置值:
在 gruntfile.js 里有:
Concat : { Dist: { Src : ‘<%= taskName_xxx %>’ }}
这个taskName_xxx 的值 可由 :
Grunt.config.set(‘taskName_xxx’, valueobj);
来配置,一般为数组;
Concat为组合由src设定的文件列表组合文件;
Uglify 为压缩插件, src为源数据文件, dest为压缩结果文件:
Uglify: { Build: { Src:’’, Dest:’’ }}Dist : { Files: { ‘压缩文件地址’, ‘源文件地址’ }}
Grunt.registerTask(‘default’, []); //default为默认必须任务配置项;
Nodejs在这里有很多模块,中间组需要学习.
Fs, connect, path等.
1>. Connect中间件, 在指定文件下创建服务与端口:
Var app = connect().use(connect.static(process.cwd())).listen(3000);
Process为内置对象, 可直接使用.
Process.cwd() 获取当前 Nodejs命令行操作所在的当前目录.
Connect.static(这里应该可以自定义一个地址)
另写法: connect[‘static’](地址);
//关闭服务
App.close();
2>. file copy write 等;
Grunt.log.writeln|error|warn|debug…Grunt.file.copy|delete|write
copy:
Grunt.file.copy(copyfrompath, copyTopath, { Process: function(contstring) { //contstring即为copyfrompath所在文件内容 //return contstring才可保存到copyTopath文件. }});
write:
Grunt.file.write(‘文件地址’, ‘文件内容’);
3>. Phantomjs部分
Phantomjs.on(‘onResourceRequested’, function(response) { //response.url //执行摸拟文件初始时加载的文件. //骤步输出});Phantomjs.on(‘error.onError’, function(msg, tracer) { //执行加载发生异常时输入});Phantomjs.on(‘mytask.done’, function(findfiles) { Files = findfiles.history; Phantomjs.halt();});//mytask.done为自定义响应事件.在grunt-lib-phantomjs插件/phantomjs/main.js内setInterval(function() { //在执行到timeout后,获取响应结果的文件是sendMessage输出.});Phantomjs.on(‘fail.load’, function(url) { //加载失败 Phantomjs.halt();});Phantomjs.on(‘fail.timeout’, function() { //超时 Phantomjs.halt();});Phantomjs.spawn(‘由connect创建的服务下地摸拟执行文件地址(url)’, { Options: { //引用事件响应文件 phantomScript: ‘grunt-lib-phantomjs插件下/phantomjs/main.js所在位置’, loadImages : false }, Done: function(err) { //返回文件数组结果 //删除相应的文件 //关闭服务 }});
Sencha相关研究结果:
Sencha页面初始化,需要加载相应的sencha components组件文件,而且要按一定的顺序排序,不然会出现,组件内引用另组件不存在的情况,这里他会默认到/touch/src下加载相应的文件所在位置.
所以如果要压缩所有的组件,就要把所有的组件加载到 Sencha Ext.application内的requires下,模拟运行初始化操作,这样,sencha核心加载会按顺序加载所需的文件。才能压缩到所有sencha components!
研究发现, Ext.device加载处理得不好, 实际上在debug模式下是没有Ext.device部分代码的,所以在全压缩模式下去除了Ext.device部分代码;
Sencha Touch 手机移动开发框架 HTML5 项目压缩方案 (一);