ionic代码压缩与代码混淆
ionic代码压缩与代码混淆
欢迎大家到我的博客查看相应内容,并关注我学习Ionic 1和Ionic 2的历程,共同学习,共同进步。
本文为译文,并加入个人理解部分,如有理解错误指出,请大家指出,大家也可移步原文。
本文解释了ionic工程发布之前的最后一步,即代码压缩(获取更好的性能)以及代码混淆(以免源码被有心者轻易获取)。包括以下步骤:
- (cordova hook)
检查javascript
:这一步需要在代码压缩和代码混淆之前进行以保证javascript代码无错误 - (gulp task)
将html页面代码转换为angular的JS代码
:这一步起到了混淆html页面代码的作用 - (gulp task)
启用angular严格依赖注入
:这一步需要在代码混淆之前进行以保证angular的依赖注入没有问题 - (gulp task)
组合js代码以及组合css代码
:这一步起到了混淆js代码以及css代码的作用 - (cordova hook)
代码丑化、压缩、混淆
:最后一步 -
为完成上述任务,我们需要同时使用gulp tasks以及cordova hooks。当执行ionic serve
时,gulp tasks会被执行。当执行ionic build android/ios
或ionic run android/ios
时,cordova hooks会被执行。
首先注意,本文说明的工程目录结构如下,读者需要根据不同的工程进行路径修改:
$PROJECT_DIR/hooks/www/js/xxx.js...templates/login/xxx.html...register/xxx.html....../......index.html
检查javascript
1.这一步需要用到jshint以及async,可以使用npm安装:
$ npm install jshint --save-dev
$ npm install async --save-dev
2.复制cordova hooks文件:
将此文件下载,并复制到$PROJECT_DIR/hooks/before_prepare文件夹里。特别注意需要给予此文件“可执行”的权限,即
$ chmod +x file_name
注意:此文件负责检测$PROJECT_DIR/www/js/目录下的js文件是否有误,请根据自己工程的实际情况对此文件进行修改:
如我的工程中有2个存放js文件的路径:$PROJECT_DIR/www/js目录和$PROJECT_DIR/www/patchjs目录,则我需要对上述文件进行如下修改:
var foldersToProcess = ['js'
];
替换为:
var foldersToProcess = ['js', 'patchjs'
];
3.测试:
终端执行:
$ ionic build android/ios
若成功,则可在终端输出中看到工程中js文件是否有错误,并指出错误/警告的行、列数以及错误/警告的原因:
检查无误:
检查有误:
根据输出提示信息可知www/patchjs/e2e-tests.conf.js文件的第15行的第二列缺失了一个分号。
注意:js代码中使用eval
函数也会导致此项检测报错,建议使用其他方法代替eval
函数,如必须使用,可以使用/*jslint evil: true */
标注:
/*jslint evil: true */
var temp = eval('(' + JSON.stringify(response) + ')');
将html页面代码转换为angular的JS代码
这一步对html页面代码的混淆是将html页面代码处理成angular的js代码(保存到一个js文件中)。
1.这一步需要用到gulp-angular-templatecache。可以使用npm安装:
npm install gulp-angular-templatecache --save-dev
2.修改gulpfile.js文件:
var templateCache = require('gulp-angular-templatecache');
var paths = {sass: ['./scss/**/*.scss'],templatecache: ['./www/templates/**/*.html']
};
gulp.task('templatecache', function (done) {gulp.src('./www/templates/**/*.html').pipe(templateCache({standalone:true})).pipe(gulp.dest('./www/js')).on('end', done);
});
gulp.task('default', ['sass', 'templatecache']);
gulp.task('watch', function() {gulp.watch(paths.sass, ['sass']);gulp.watch(paths.templatecache, ['templatecache']);
});
3.修改ionic.project文件:
"gulpStartupTasks": ["sass","templatecache","watch"
]
4.在app.js中增加templates
模块依赖:
angular.module('starter', ['ionic', 'starter.controllers', 'templates'])
5.在index.html中引入templates.js文件:
<script src="js/templates.js"></script>
注意:这里的templates.js文件是下一步生成的。
6.测试:
$ ionic serve
或者
$ gulp templatecache
执行完毕,在$PROJECT_DIR/www/js目录下将生成templates.js文件,此文件中将包含对html页面代码的转换结果。
7.改变templateUrl路径:
打开$PROJECT_DIR/www/js/templates.js文件,我们可以看到类似于下面的代码:
$templateCache.put("login.html", ...
大家可以看到,此时的login.html
前面没有templates
路径前缀,其他的html文件也是类似的,所以我们之前在js中使用templateUrl
指定的html文件路径便需要作出相应变化—-去除templates
路径前缀:
首先,我们要知道哪里会使用到templateUrl
属性,可能有如下几种情况:
1.app.js中使用$stateProvider.state()
定义路由时;
2.类似于$ionicPopover
的控件或自定义的directives中到;
我们以情况1为例说明修改的过程:
app.js之前可能的情况:
.state('login', {url: "/",templateUrl: "templates/login.html",controller: 'LoginCtrl'});
修改之后则为:
.state('login', {url: "/",templateUrl: "login.html",controller: 'LoginCtrl'});
其他的也类似地进行修改。
启用angular ng-strict-di
在我们进行代码压缩之前,我们需要启用angular的ng-strict-di,即严格依赖注入,使用ng-strict-di使得工程中依赖注入不会有问题,更多关于ng-strict-di可以看这里。
1.首先通过npm安装gulp-ng-annotate:
$ npm install gulp-ng-annotate --save-dev
2.其次,修改gulpfile.js文件:
var ngAnnotate = require('gulp-ng-annotate');
var paths = {sass: ['./scss/**/*.scss'], templatecache: ['./www/templates/**/*.html'], ng_annotate: ['./www/js/*.js']
};
gulp.task('ng_annotate', function (done) {gulp.src('./www/js/*.js').pipe(ngAnnotate({single_quotes: true})).pipe(gulp.dest('./www/dist/dist_js/app')).on('end', done);
});
gulp.task('default', ['sass', 'templatecache', 'ng_annotate']);
gulp.task('watch', function() {gulp.watch(paths.sass, ['sass']);gulp.watch(paths.templatecache, ['templatecache']);gulp.watch(paths.ng_annotate, ['ng_annotate']);
});
3.修改ionic.project文件:
"gulpStartupTasks": ["sass","templatecache","ng_annotate","watch"
]
4.重新定位index.html里js的文件:
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/services.js"></script>
<script src="dist/dist_js/app/templates.js"></script>
5.在ng-app
标签下加入directive:ng-strict-di
:
<body ng-app="your-app" ng-strict-di>
6.测试
$ ionic serve
或
$ gulp ng_annotate
上面的执行过程将会生成$PROJECT_DIR/www/dist/dist_js/app文件夹,并且其中包含了严格符合注入标准的工程js文件。
合并js文件以及css文件
1.通过npm安装gulp-useref:
$ npm install gulp-useref --save-dev
2.其次,修改gulpfile.js文件:
var useref = require('gulp-useref');
var paths = {sass: ['./scss/**/*.scss'], templatecache: ['./www/templates/**/*.html'], ng_annotate: ['./www/js/*.js'], useref: ['./www/*.html']
};
gulp.task('useref', function (done) {var assets = useref.assets();gulp.src('./www/*.html').pipe(assets).pipe(assets.restore()).pipe(useref()).pipe(gulp.dest('./www/dist')).on('end', done);});
gulp.task('default', ['sass', 'templatecache', 'ng_annotate', 'useref']);
gulp.task('watch', function() {gulp.watch(paths.sass, ['sass']);gulp.watch(paths.templatecache, ['templatecache']);gulp.watch(paths.ng_annotate, ['ng_annotate']);gulp.watch(paths.useref, ['useref']);});
3.修改ionic.project文件:
"gulpStartupTasks": ["sass","templatecache","ng_annotate","useref","watch"
]
4.修改index.html文件,对需要合并的js文件和css文件进行处理:
<!-- build:css dist_css/styles.css --><link href="css/ionic.app.css" rel="stylesheet">
<!-- endbuild -->
<!-- build:js dist_js/app.js -->
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/services.js"></script>
<script src="dist/dist_js/app/templates.js"></script>
<!-- endbuild -->
注意:可能有些外部的css文件或js文件不想被处理,那么就保持原状即可。
5.测试
$ ionic serve
或
$ gulp useref
上面的执行过程会生成以下文件:
$PROJECT_DIR/www/dist/index.html
$PROJECT_DIR/www/dist/dist_css/styles.css
$PROJECT_DIR/www/dist/dist_js/app.js
其中后面2个文件,即是被合并过后的文件。
注意:新版本的gulp-useref没有assets()方法,所以可能会出现错误,大家可以用gulp-useref的2.1.0版本,即第一步安装时使用:
$ npm install gulp-useref@2.1.0 --save-dev
最后一步
1.使用npm安装cordova-uglify
以及mv
:
$ npm install cordova-uglify --save-dev
$ npm instal mv --save-dev
2.复制cordova hooks文件:
将这些文件添加至$PROJECT_DIR/hooks/after_prepare文件夹中。并且要注意这些文件中的有关路径的操作,是对应于前几步中的路径的,如果工程结构不一样,请自行调整这些文件中有关路径的部分。特别注意需要给予此文件“可执行”的权限,即
$ chmod +x file_name
现在,我们就可以生成处理完成的文件了:
$ ionic build android/ios
延伸阅读
ionic代码压缩与代码混淆
ionic代码压缩与代码混淆相关推荐
- 在线压缩html,JS代码压缩 - javascript代码压缩 - jsmin在线js压缩工具
输入代码: // is.js // (c) 2001 Douglas Crockford // 2001 June 3 // The -is- object is used to identify t ...
- webpack --- 发布环境的配置 代码压缩 代码分类
说明 源代码 本篇主要对发布环境的配置说明 前面2点是对webpack的一个复习. 第3点开始,逐步配置部署代码 1. Webpack发布的策略 2.1 在实际开发中,一般会有两套方案: 开发期间的项 ...
- 压缩html页面 seo,WordPress前端html代码压缩优化方法
为了优化网站的访问速度,对网页进行压缩是非常不错的一条方法.压缩页面减少了页面的体积提升了访问速度. 部署功能代码 //压缩html代码 function wp_compress_html(){ fu ...
- android studio防止反编译,防反编译利器-Android studio混淆代码压缩apk包体积
前言 打包混淆对初学者小冷来说是很抗拒的,刚开始我只是知道在build.gradle文件 minifyEnabled下设置为true,可是proguard-rules.pro文件里面什么都没有,就这样 ...
- android 万能混淆文件,Android ProGuard 代码压缩混淆与打包优化
为什么要启动ProGuard(所有试验都在AS 环境) 代码压缩通过 ProGuard 提供,ProGuard 会检测和移除封装应用中未使用的类.字段.方法和属性, 包括自带代码库中的未使用项(这使其 ...
- html 混淆压缩,前端代码的精简、混淆、压缩和编译
几个基本概念 在网站部署前,我们往往要对前端的代码进行发布,我这里说的"发布",指的就是精简.混淆.压缩.编译等. 1.精简: 目的是减少代码体积,减小网络传输时间,提高页面响应. ...
- 使用UglifyJS实现将js代码压缩混淆
使用UglifyJS进行js代码压缩混淆(混淆后的代码的可读性是较高的,这里主要是压缩体积) 安装:全局:npm install uglify-js -g 局部:npm install uglify- ...
- js代码压缩混淆uglify
-c压缩,-m混淆命名,-b格式化输出js文件(否则为只有一行),-o目标输出文件. 压缩一个文件: uglifyjs main.js -o publish/main.js -c -m -b 压缩多个 ...
- uglify js 代码压缩混淆
关于 js 压缩混淆 npm install uglify-js -g(不支持 es6语法) npm install uglify-es -g(支持es6语法) 使用命令uglifyjs uglify ...
- Android Studio 3.3 Beta提供了新的Android代码压缩器R8
摘要: 在将D8作为其新的Dalvik编译器之后,谷歌已经开始研发新的代码压缩器R8,在Android Studio 3.3 beta版本上它已经可以使用了.R8承诺用更少的时间交付更小的APK文件. ...
最新文章
- 美团点评业务之技术解密,日均请求数十亿次的容器平台
- [转]Data mining with WEKA, Part 3: Nearest Neighbor and server-side library
- python答疑的作用_不学Python之集中答疑(5)
- NLP论文 -《Distributed Representations of Sentences and Documents》-句子和文档的分布式表示学习
- 联想集团委任杨澜为独立董事:任期三年年薪235万元
- [YOLO] libtorch-yolov3 代码下载
- ubuntu下用postfix搭建邮件服务器
- 「Algospot」龙曲线DRAGON
- matlab求解mtsp多配送中心路径优化问题(附代码)
- H3C设备组网故障之广播风暴篇
- 在Linux系统下安装更换操作系统
- When Hybrid Cloud Meets Flash Crowd: Towards Cost-Effective Service Provisioning--INFOCOM 2015
- 2016【淘宝运营】,如何营销宝贝详情页,提高宝贝的转化率
- 一个资深程序员看12306 (三)
- 原生爬虫爬取虎牙绝地求生直播热度排行榜
- 淘宝跨境电商怎么做 淘宝跨境电商注意事项
- NAT配置两台Ubuntu通网
- Mars3D平台介绍
- 游戏项目如何快速实现多语言版本(国际化)--Egret篇
- wow服务器维护8月14,2008年8月14日维护公告