android Hybird开发,phonegap项目,node grunt 压缩、混淆 angularjs/ionic

原创 2016年05月30日 10:24:13

在做androidHybird开发的过程中,一直遇到了一个混淆的问题,不想让其他的开发人员直接的一个解压缩就可以看到一些关键的代码;在做混淆的过程中,尝试把CSS/JS,还有Angularjs/ionic中的Directive、Config、Service、Factory、Controller的混淆;
最后发现,可以压缩混淆的内容只有CSS、js、Controller;其他的代码不能用于混淆;
如果看着觉得我的股观点有有误,请留言,交流一下;
如下就是做压缩混淆的代码的流程:

1、环境的配置

    安装了node.js /npm这些内容就不多说,比较做这个还是有这些基础的,自己掌握;
    安装Node.js,一直点击下一步:
    https://nodejs.org/en/ 

1.1、安装node的Grunt和基础知识

安装Grunt:
如果你之前安装过老的0.3版本,请先卸载:

npm uninstall -g grunt

安装Grunt命令行(CLI):

npm install -g grunt-cli

注1:-g代表全局安装,Grunt有二个版本:服务器端版本(grunt)和客户端版本(grunt-cli)。

1.2、创建新的Grunt项目

    进入到Android Hybird开发的项目目录中,这个项目也就是本人的项目了,我们主要就是混淆www的项目;如下图:

这里写图片描述

这里写图片描述
进入到该目录以后,就可以创建两个Grunt项目的必要文件,
目录下添加两个文件:package.json 和 Gruntfile.js。
package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。
Gruntfile.js:用来配置或定义任务(task)并加载Grunt插件
package.json应当放置于项目的根目录中,与Gruntfile.js在同一目录中。

2、package.json 和 Gruntfile.js两个文件的创建和配置说明

2.1、创建package.json的两种方式

2.1.1 用命令(npm init)自动配置有关的信息

执行npm init 命令(根据默认的grunt-init模板,引导你创建一个“基本”的package.json文件):

npm init

根据提示填写信息(都允为空):下面的都会自动的弹出来需要你的配置

name: (GruntT) // 模块名称:只能包含小写字母数字和中划线,如果为空则使用项目文件夹名称代替
version: (0.0.0) // 版本号
description: // 描述:会在npm搜索列表中显示
entry point: (index.js) // 模块入口文件
test command: // 测试脚本
git repository: // git仓库地址
keywords: // 关键字:用于npm搜索,多个关键字用空格分开
author: // 作者
license: (BSD-2-Clause) // 开原协议

2.1.2 用手动创建package.json文件的方法配置有关的信息

{
  "name": "oversale2",
  "version": "1.0.0",
  "author": "liuyongong",
  "description":"oversale2 hunxiao",
  "dependencies": {
    "grunt": "*"
  }
}

dependencies里面的参数,指定了项目依赖的Grunt和Grunt插件版本。具体数据,如”0.9”代表安装该插件的某个特定版本,如果只需安装最新版本,可以改成”*”。

2.2、创建配置Gruntfile.js文件

module.exports = function (grunt) {
    'use strict';
    grunt.initConfig({
        csslint: {
            /* 检查 CSS 语法 */
            src: ['www/css/*.css']
        },
        jshint: {
            /* 检查 js 语法 */
            all: ['www/app/**/*.js', 'www/js/config.js', 'www/js/directive.js', 'www/js/phonegap.js',
                    'www/js/show.services.js']
        },
        imagemin: {
            /* 压缩优化图片大小 */
            dist: {
                options: {
                    optimizationLevel: 3
                },
                files: [
                    {
                        expand: true,
                        cwd: 'www/img/',
                        src: ['**/*.{png,jpg,jpeg}'], // 优化 img 目录下所有 png/jpg/jpeg 图片
                        dest: 'www/img/' // 优化后的图片保存位置,默认覆盖
                    }
                ]
            }
        },
        concat: {
            /* 合并 CSS 文件 */
            css: {
                src:  ['www/css/*.css'],
                /* 根据目录下文件情况配置 */
                dest: 'www/css/all.css'
            },
            js: {
                src: ['www/app/**/*.ctrl.js'],
                /*合并和混淆有关Angularjs中的Controller代码*/
                dest: 'www/js/all.js'
            }
        },
        cssmin: {
            /*压缩 CSS 文件为 .min.css */
            options: {
                keepSpecialComments: 0 /* 移除 CSS 文件中的所有注释 */
            },
            minify: {
                expand: true,
                cwd: 'www/css/',
                src: ['*.css'],
                dest: 'www/css/',
                ext: '.min.css'
            }
        }, 
         uglify: {
            /* 最小化、混淆、合并 JavaScript 文件 */
            target: {
                files: {
                    'www/js/all.min.js': ['www/js/all.js']
                }
            }
        },
        watch: {
            /* 监控文件变化并执行相应任务 */
            img: {
                files: ['img/**/*.{png,jpg,jpeg}'],
                options: {
                    livereload: true
                }
            },
            css: {
                options: {
                    event: ['changed', 'added'],
                    livereload: true
                },
                files: ['css/**/*.css']
            },
            js: {
                options: {
                    livereload: true
                },
                files: ['js/**/*.js']
            },
            html: {
                options: {
                    livereload: true
                },
                files: ['*.html']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-csslint');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    // 定义默认任务
    grunt.registerTask('default', ['csslint', 'jshint', 'imagemin', 'cssmin', 'concat','uglify']);
};

3、执行命令和任务

上面的两个文件配置好了以后,这个时候就要创建Grunt插件了;

npm install

这时你会发现项目文件夹中多了个node_modules文件夹,其里面就是对应的Grunt和Grunt插件。
执行任务:
执行配置中所有的任务命令:

grunt 

上面的这个命令会自动依次执行’csslint’, ‘jshint’, ‘imagemin’, ‘cssmin’, ‘concat’,’uglify’的各个命令;
执行某个特定的任务命令:

grunt csslint     //这个命令用于检测有关的CSS语法错误
grunt jshint      //这个命令用于检测有关的js语法错误
grunt imagemin    //这个命令用于有压缩image图片
grunt cssmin      //这个命令压缩CSS文件
grunt concat      //这个命令用于合并相关的css/js代码
grunt uglify      //这个命令用于混淆有关的js代码

执行上述命令的时候有可能会出现如下的问题:
这里写图片描述
这个时候需要安装工具,用如下的命令,其他类似:

npm install grunt-contrib-csslint

这里写图片描述

4、注意事项

在混淆angularjs中的过程中,会出错,要考虑这个方面的问题, 如下:

angular.module('aftersale.ctrl', [])
  .controller('aftersaleCtrl', [
      "$scope","$log","$cordovaPreferences","$cordovaBarcodeScanner","ShowFactory",
      function ($scope, $log, $cordovaPreferences,$cordovaBarcodeScanner,ShowFactory) {
        $scope.afterSaleTitle="售后";
        $scope.scanBarcode = function()
        {
          $cordovaBarcodeScanner.scan().then(function(imageData)

在注入有关的function中的参数的时候,要前面写一个格式,这样就可以找到混淆中参数a/b/c等等代表的含义;

混淆的过程已经讲完了,如有其它的疑问,请留言;
我自己创建的package.json 和 Gruntfile.js的文件代码下载链接如下:
http://download.csdn.net/detail/qq417431233/9533427

版权声明:本文为博主原创文章,未经博主允许不得转载。

ionic代码压缩与代码混淆

ionic代码压缩与代码混淆 原文 本文解释了ionic工程发布之前的最后一步,即代码压缩(获取更好的性能)以及代码混淆(以免源码被有心者轻易获取)。包括以下步骤: (cordova hook...

grunt代码混淆

1.grunt是基于nodejs的,所以要先安装nodejs。 2. 安装nodejs Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装...

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

android+phonegap制作hybird app

首先介绍一下hybird app是什么,可以看这里:

Sencha Touch/ExtJS6 Modern结合Phonegap/Cordova开发移动端Hybird应用

英文原文: Leveraging PhoneGap within Sencha Touch 下面作简要概括: 1、进入ST SDK cd D:\Code\Web\touch-2.3.1 2、...

用ionic快速开发hybird App(已附源码,在下面+总结见解)

1.ionic简介 ionic 是用于敏捷开发APP的解决方案。核心思路是:利用成熟的前端开发技术,来写UI和业务逻辑。也就是说,就是一个H5网站,这个区别于react-native,nat...

Hybird HTML5 App(移动应用开发)之:了解Ionic框架

Ionic并不是一个入门级的框架,它是一个专注于用web开发技术,基于HTML5创建类似于手机平台原生应用的一个开发框架。绑定了AngularJS和SASS。这个框架的目的是从web的角度开发手机应用...
  • flyonok
  • flyonok
  • 2016年01月14日 13:43
  • 904
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:android Hybird开发,phonegap项目,node grunt 压缩、混淆 angularjs/ionic
举报原因:
原因补充:

(最多只允许输入30个字)