Sencha Touch 手机移动开发框架 HTML5 项目压缩方案 （一）;

Index.html/
App.js
App.json
/touch[sdk]/
        /Sencha-touch.js
        /src
Resources/
App/

>sencha compile >[-cl=touch/src,app] //这个不必写,不然生成出来的文件,会很大,估计是重复拼接的原因.
>-ig=app.js,app/view //这里可以写文件,或是文件夹都可以
>concat –yui jsoutfile.js

sencha compile –cl=touch/src,app meta –filenames –out filenames.txt

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

for /f "delims=" %%j in (%%i) do echo %%j >> %outFile%
###改为:
copy "%outFile%"+"%%i" %outFile%

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

npm install –g grunt-init

git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin

>md 项目文件夹名[grunt-sencha-zorderCompress]

>cd grunt-sencha-zorderCompress

>grunt-init gruntplugin #[在这个文件下创建grunt插件模板]# 

>Npm install grunt-lib-phantomjs
>Npm install phantomjs #[会生成phantomjs与.bin文件夹]#
>Npm install connect

"dependencies": {
    "grunt-lib-phantomjs": "~0.4.0",
    "phantomjs": "1.9.2-1",
    "connect": "~2.9.0"
  },

‘use strict’;

Module.exports = function(grunt) {
        Grunt.registerMultiTask(‘Sencha_ZOrderCompress’, ‘plug description’, function() {
            //do…
            //在这里有 方法内的 this对象.
            //可以运行[gruntfile.js] grunt.registerTask (‘xxx’, [‘Sencha_ZOrderCompress’]);
            //所指定节点的数据
　　　　});
};

GetSenchaOrderAllComponents: {
        dist: {
            options: {
                appJs : ‘app.js’,
                processHtml:’index.html’
            }
        }
}

Var options = this.options({});

/*
 * 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;

Grunt.initConfig({
        TaskName : {
            Dist: {
                //xxxx
            }
        }
});

this.files.forEach(function(f) {

            var files = f.src.filter(function(filepath) {

                     //filepath即为src设定下的文件列表的其中一个文件.

            });

});    

Var options = instance.options({}); //可以instance.options的json部分再添加字段属性.

Concat : {
        Dist: {
            Src : ‘<%= taskName_xxx %>’
        }
}

Grunt.config.set(‘taskName_xxx’, valueobj);

Uglify: {
        Build: {
            Src:’’,
            Dest:’’
        }
}
Dist : {
        Files: {
            ‘压缩文件地址’, ‘源文件地址’
                }
}

Var app = connect().use(connect.static(process.cwd())).listen(3000);

Grunt.log.writeln|error|warn|debug…
Grunt.file.copy|delete|write

Grunt.file.copy(copyfrompath, copyTopath, {
        Process: function(contstring) {
            //contstring即为copyfrompath所在文件内容
            //return contstring才可保存到copyTopath文件.
        }
});

Grunt.file.write(‘文件地址’, ‘文件内容’);

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) {
            //返回文件数组结果
            //删除相应的文件
            //关闭服务
        }
});