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

前言

如果你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将执行任务

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