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

最新推荐文章于 2024-03-17 09:50:16 发布

兜生

最新推荐文章于 2024-03-17 09:50:16 发布

阅读量2.3k

点赞数

分类专栏： phoneGap跨平文章标签： phonegap android混合开 angularjs grunt 混淆

本文链接：https://blog.csdn.net/QQ417431233/article/details/51536042

版权

phoneGap跨平专栏收录该内容

14 篇文章 0 订阅

订阅专栏

在做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)