前言

如果你Ionic專案即有混淆又有熱更新機制，雖然常規目錄結構可以滿足二者，但編譯過程是非常複雜，ionic預設讀取的是www目錄，而混淆後的原始碼是打包在app中，再加上熱更新的配置也預設是生成在www中，這樣一來熱更新的md5對比檔案就存在不一致的情況，那麼問題來了，有辦法可以解決嗎？答案是肯定的，因為程式設計師永遠都是最懶的高階動物，我們可以把ionic目錄結構稍微更改一下，原始碼放在src目錄，利用gulp自動化構建工具，將src檔案對映到www目錄中，輕鬆一鍵搞定混淆與熱更新。

工具

gulp

簡介：自動化構建工具

全域性安裝命令：npm install –g gulp

專案中安裝命令：npm install gulp –save-dev

del

簡介：刪除檔案與目錄

安裝命令：npm install --save del

gulp-ng-annotate

簡介：為ng-angularJS新增依賴注入

安裝命令：npm install gulp-ng-annotate --save-dev

gulp-uglify

簡介：壓縮javascript檔案，減小檔案大小

安裝命令：npm install gulp-uglify --save-dev

gulp-clean-css

簡介：壓縮css檔案，減小檔案大小，並給引用url新增版本號避免快取

安裝命令：npm install gulp-clean-css --save-dev

gulp-htmlmin

簡介：使用gulp-htmlmin壓縮html，可以壓縮頁面javascript、css，去除頁面空格、註釋，刪除多餘屬性等操作

安裝命令：npm i gulp-htmlmin --save-dev

gulp-shell

簡介：執行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將執行任務