這篇文章算是對上一篇文章《在微信中使用ionic1之填坑總結》的一個補充，是項目在微信瀏覽器中使用出現(xiàn)緩存問題的一個解決方案喷橙。
在上篇文章的最后提出來了還可以做得更好的一個點就是關于緩存這個問題的優(yōu)化隔箍。當時提出來的做法是在每個頁面的ur后面加上一個時間戳來實現(xiàn)去緩存贪染，但是最后通過實踐發(fā)現(xiàn)這個辦法并不可行物蝙。最后的最后泛啸，選擇使用Gulp來完成了這個任務边琉。
關于Gulp
Gulp是一個前端的自動化構建工具属百，做前端的同學應該都知道。比如之前的Grunt变姨，以及現(xiàn)在流行的Webpack族扰。
但是作為一個從做原生（Native APP）開發(fā)到做混合（Hybrid APP）開發(fā)再到把混合開發(fā)的APP移植到微信公眾號程序猿來說，這是一個新的知識點定欧。
通過自動化構建工具渔呵，我們可以完成對代碼的合并、壓縮以及混淆砍鸠，這里的代碼包含JS扩氢、HTML、CSS甚至還有圖片文件爷辱。
其實原生開發(fā)的IDE已經幫我們做了大部分的自動化構建的工作录豺，以至于在原生開發(fā)的時候并不是很關心這方面朦肘。
為什么是Gulp？
最簡單的原因就是ionic1本身就是支持Gulp的双饥，在創(chuàng)建好的ionic1項目中就已經包含了gulpfile.js文件媒抠。
使用Gulp的前期準備工作這里就不再多講，請自行參考--Gulp中文網(wǎng)--咏花。
使用Gulp打包之后的優(yōu)缺點：
優(yōu)點：
- 無需引入其他第三方的框架（比如RequireJS）即可拆分js文件趴生，避免了出現(xiàn)超級js文件
- 打包壓縮之后，代碼體積減小昏翰，文件數(shù)量減少苍匆，節(jié)省了加載時間
- 在引用文件是配合參數(shù)的使用，解決了微信瀏覽器中的緩存問題
缺點：
- 每次代碼修改之后都必須要打包之后才能看到修改的結果棚菊，不能像之前代碼修改之后馬上就能看到效果浸踩。這是目前最大的一個缺點，暫時未發(fā)現(xiàn)解決辦法
在項目中使用Gulp
在項目中使用Gulp窍株，需要完成3個工作：
- 配置gulpgile.js文件民轴，以及安裝相關Gulp插件
- angularJS代碼的改造
- 修改index.html中對文件的引用
在gulpfile.js中引入相關插件（ps：記得在項目中安裝相關Gulp的插件！）
var concat = require('gulp-concat');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs');
var ngmin = require('gulp-ngmin');
var uglify = require('gulp-uglify');
var stripDebug = require('gulp-strip-debug');
var ngAnnotate = require('gulp-ng-annotate');
var ngHtml2Js = require('gulp-ng-html2js');// ng模板合并壓縮成js
合并壓縮 js
這里要合并壓縮的js是我們自己寫的那些js代碼球订，也就是www/js目錄下的文件后裸。對于本地的第三方js文件，最好是放到lib目錄中去冒滩，第三方的js基本不會怎么改變微驶，而且大部分第三方的js代碼都是已經打包過了的。
gulp.task('minifyJs', function () {
return gulp.src('./www/js/**/*.js') // 需要操作的文件
.pipe(concat('myionic.js')) // 合并需要操作的文件為一個文件myionic.js
.pipe(gulp.dest('./www/dist')) // 輸出myionic.js到www/dist目錄
.pipe(rename('myionic.min.js')) // 文件重命名為myionic.min.js
.pipe(ngAnnotate())
.pipe(ngmin({dynamic: false}))//Pre-minify AngularJS apps with ngmin
.pipe(stripDebug())//除去js代碼中的console和debugger輸出
.pipe(uglify({compress: true})) // 壓縮
.pipe(gulp.dest('./www/dist')); // 輸出
});
合并壓縮angularjs模板
gulp.task('html2js', function () {
return gulp.src("./www/templates/**/*.html")//原路徑
.pipe(ngHtml2Js({
moduleName: "myionic.templates"
}))//html模板轉js文件
.pipe(concat("templates.min.js"))//合并
.pipe(uglify({compress: false}))//壓縮
.pipe(gulp.dest("./www/dist"));//目標路徑
});
合并壓縮css
gulp.task('minifyCss', function () {
return gulp.src("./www/css/*.css")
.pipe(concat('myionic.min.css'))
.pipe(minifyCss())
.pipe(gulp.dest("./www/dist"));
});
對js代碼的改造开睡，首先是app.js
var myionic = angular.module('imcyz', ['ionic', 'myionic.controllers', 'myionic.services', 'myionic.directives', 'myionic.filters', 'ngCordova', 'ionicLazyLoad', 'ngTouch', 'myionic.templates']);
// 這里的myionic.templates對應合并壓縮angularjs模板中的moduleName
var controllers = angular.module('myionic.controllers', []);
var services = angular.module('myionic.services', []);
var directives = angular.module('myionic.directives', []);
var filters = angular.module('myionic.filters', []);
myionic.run(['$ionicPlatform', '$rootScope', '$timeout', '$http', '$ionicPopup', '$ionicHistory', '$location', '$ionicLoading', function ($ionicPlatform, $rootScope, $timeout, $http, $ionicPopup, $ionicHistory, $location) {
// TODO
}
myionic.config(['$stateProvider', '$urlRouterProvider', '$ionicConfigProvider', '$httpProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider, $locationProvider) {
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard');
$ionicConfigProvider.platform.android.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.backButton.previousTitleText('ion-android-arrow-back');
$ionicConfigProvider.platform.android.views.transition('android');
$ionicConfigProvider.views.swipeBackEnabled(false);
// TODO
}
因為我們已經打包了項目中的模板文件因苹，所以在配置路由的templateUrl，甚至是其他（比如modal）的templateUrl篇恒，也就只需要配置為templates之后的路徑扶檐。
然后，是controller胁艰、service款筑、factory、directive腾么、filter文件的改造
所有的依賴注入都必須嚴格按照下面的樣式來寫奈梳，包括在app.js中的依賴注入，不然在打包之后運行項目會報錯解虱。
controllers.controller('AboutUsCtrl', ['$scope', '$cordovaAppVersion', function ($scope, $cordovaAppVersion,) {
// TODO
}]);
services.service("MyService", ['$http', function ($http) {
// TODO
}]);
services.factory("MyFactory", ['$http', '$injector', function ($http, $injector) {
// TODO
}]);
directives.directive('setFocus', ['$timeout', function ($timeout) {
return {
link: function (scope, element) {
$timeout(function () {
element[0].focus();
}, 500);
}
};
}]);
filters.filter('trustedAsRes', ['$sce', function ($sce) {
return function (url) {
return $sce.trustAsResourceUrl(url);
};
}]);
至此也就完成了代碼的改造以及Gulp的配置攘须。
可以單個的執(zhí)行gulp html2js這樣的命令來合并壓縮模板文件，也可以通過把任務加到default里面去殴泰，直接一個gulp命令執(zhí)行所有要執(zhí)行的任務于宙。
gulp.task('default', ['html2js','minifyCss','minifyJs']);
改造index.html
在命令行運行gulp命令之后浮驳，在項目的www目錄下就會多出一個dist目錄，里面包含4個文件限煞。
www/
../dist/
../../myionic.js
../../myionic.min.js
../../myionic.min.css
../../templates.min.js
在index.html中對文件的引用抹恳，也就只需引用以上四個文件即可。
myionic.js只是所有js文件的合并署驻，可以在開發(fā)的時候使用方便調試。
myionic.min.js做了混淆健霹，適合用于正式上線的生產環(huán)境旺上。
在每個文件引用里面加入一個版本參數(shù)v，每次代碼改變之后都需要變更v的值糖埋，這樣就可以達到去緩存的效果了Ｐā！瞳别！
<!--開發(fā)環(huán)境使用-->
<script src="dist/myionic.js?v=201711110000"></script>
<!--生產環(huán)境使用-->
<!--<script src="dist/myionic.min.js?v=201711110000"></script>-->
<script src="dist/templates.min.js?v=201711110000"></script>
<link href="dist/myionic.min.css?v=201711110000" rel="stylesheet">
