首页 > 代码库 > 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分按需压缩与全压缩两种方式;

每种方式下又可以分:

  1. APP_APPJS_ADKCOMS : 压缩两份: apps/下的文件, 以及 sdk+components的文件
  2. APP_APPJS_ADK_COMS : 压缩三份 : apps/下的文件, 以及 sdk文件 和 components文件三部分.
  3. 每种模式都可以全压缩

所有配置出来的可压缩项为:

全压缩: ‘<%=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 项目压缩方案 (一);