ionic利用gulp混淆代码与编译热更新

ionic 专栏收录该内容
2 篇文章 0 订阅

前言

如果你Ionic项目即有混淆又有热更新机制,虽然常规目录结构可以满足二者,但编译过程是非常复杂,ionic默认读取的是www目录,而混淆后的源码是打包在app中,再加上热更新的配置也默认是生成在www中,这样一来热更新的md5对比文件就存在不一致的情况,那么问题来了,有办法可以解决吗?答案是肯定的,因为程序员永远都是最懒的高级动物,我们可以把ionic目录结构稍微更改一下,源码放在src目录,利用gulp自动化构建工具,将src文件映射到www目录中,轻松一键搞定混淆与热更新。

工具

gulp

简介:自动化构建工具

中文API地址:http://www.ydcss.com/archives/424

全局安装命令:npm install –g gulp

项目中安装命令:npm install gulp –save-dev

del

简介:删除文件与目录

Github地址:https://github.com/sindresorhus/del

安装命令:npm install --save del

gulp-ng-annotate

简介:为ng-angularJS添加依赖注入

Github地址:https://github.com/Kagami/gulp-ng-annotate

安装命令:npm install gulp-ng-annotate --save-dev

gulp-uglify

简介:压缩javascript文件,减小文件大小

Github地址:https://github.com/terinjokes/gulp-uglify

安装命令:npm install gulp-uglify --save-dev

gulp-clean-css

简介:压缩css文件,减小文件大小,并给引用url添加版本号避免缓存

Github地址:https://github.com/scniro/gulp-clean-css

安装命令:npm install gulp-clean-css --save-dev

 

gulp-htmlmin

简介:使用gulp-htmlmin压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作

Github地址:https://github.com/jonschlinkert/gulp-htmlmin

安装命令:npm i gulp-htmlmin --save-dev

gulp-shell

简介:执行shell命令的库

Github地址:https://github.com/sun-zheng-an/gulp-shell

安装命令:npm install --save-dev gulp-shell

 

配置gulpfile.js文件

项目根目录新建gulpfile.js文件,文件有变量 isRelease 控制混淆的开关

内容如下:

//require('')对应 node_modules 文件夹下各工具的文件夹名
var gulp = require('gulp');
var del = require('del');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-htmlmin');
var shell = require('gulp-shell');

var isRelease = true; //true=生产模式;false=开发模式

var paths = {
    src_path: 'src/**/*'
};

//清空www目录
gulp.task('clear_www', function () {
    return del('www/**/*');
});

//执行完 clear_www 才执行 copy_src
gulp.task('copy_src', ['clear_www'], function () {
    return gulp.src(paths.src_path)//复制src到www
        .pipe(gulp.dest('www'));
});

var minifyJs = function () {
    return gulp.src(['www/js/*.js', 'www/js/**/*.js'])
        .pipe(ngAnnotate({
            single_quotes: true
        }))//ng-angularJS添加依赖注入
        .pipe(uglify())//压缩js
        .pipe(gulp.dest('www/js'));
}
//gulp.task('minify-js', ['ng_annotate'], function () {
gulp.task('minify-js', ['copy_src'], function () {
    if (isRelease) {
        minifyJs();
    }
    return true;
});

var minifyCss = function () {
    return gulp.src('www/css/*.css')
        .pipe(cleanCSS())//压缩css
        .pipe(gulp.dest('www/css'));
}
gulp.task('minify-css', ['minify-js'], function () {
    if (isRelease) {
        minifyCss();
    }
    return true;
});

var minifyHtml = function () {
    return gulp.src(['www/page/*.html', 'www/page/**/*.html'])//多个文件以数组形式传入
        .pipe(htmlmin({
            collapseWhitespace: true
        }))//压缩html
        .pipe(gulp.dest('www/page'));
}
gulp.task('minify-html', ['minify-css'], function () {
    if (isRelease) {
        minifyHtml();
    }
    return true;
});

gulp.task('shell', ['minify-html'], shell.task([
  'echo',
  'cordova-hcp build'//编译生成热更新配置文件
]));

gulp.task('default', ['clear_www', 'copy_src', 'minify-js', 'minify-css', 'minify-html', 'shell']);

//自动监测文件变化执行watch任务
gulp.task('watch', function () {
    gulp.watch(paths.src_path, ['default']);
});

 

执行

vs2015 快捷键 ctrl+alt+backspace

 

打开后双击default将执行任务

欢迎关注公众号,每天为您推送“人生感悟、说话技巧、职场规则、职场成长”

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值