關於Gulp

Gulp是一個前端的自動化構建工具，做前端的同學應該都知道。比如之前的Grunt，以及現在流行的Webpack。

但是作為一個從做原生（Native APP）開發到做混合（Hybrid APP）開發再到把混合開發的APP移植到微信公眾號程序猿來說，這是一個新的知識點。

通過自動化構建工具，我們可以完成對代碼的合併、壓縮以及混淆，這裡的代碼包含JS、HTML、CSS甚至還有圖片文件。

其實原生開發的IDE已經幫我們做了大部分的自動化構建的工作，以至於在原生開發的時候並不是很關心這方面。

為什麼是Gulp？

最簡單的原因就是ionic1本身就是支持Gulp的，在創建好的ionic1項目中就已經包含了gulpfile.js文件。

使用Gulp的前期準備工作這裡就不再多講，請自行參考Gulp中文網。

使用Gulp打包之後的優缺點：

優點：
  1. 無需引入其他第三方的框架（比如RequireJS）即可拆分js文件，避免了出現超級js文件
  2. 打包壓縮之後，代碼體積減小，文件數量減少，節省了載入時間
  3. 在引用文件是配合參數的使用，解決了微信瀏覽器中的緩存問題

缺點：

  1. 每次代碼修改之後都必須要打包之後才能看到修改的結果，不能像之前代碼修改之後馬上就能看到效果。這是目前最大的一個缺點，暫時未發現解決辦法。

在項目中使用Gulp

在項目中使用Gulp，需要完成3個工作：

  1. 配置gulpgile.js文件，以及安裝相關Gulp插件
  2. angularJS代碼的改造
  3. 修改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的配置。

可以單個的執行gulp html2js這樣的命令來合併壓縮模板文件，也可以通過把任務加到default裡面去，直接一個gulp命令執行所有要執行的任務。

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文件的合併，可以在開發的時候使用方便調試。myionic.min.js做了混淆，適合用於正式上線的生產環境。在每個文件引用裡面加入一個版本參數v，每次代碼改變之後都需要變更v的值，這樣就可以達到去緩存的效果了

<!--開發環境使用-->
<script src="dist/myionic.js?v=201711110000"></script>

<!--生產環境使用-->
<!--<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">

推薦閱讀：

查看原文 >>
相关文章