使用Gulp打包ionic1專案

關於gulp

為什麼是gulp？

最簡單的原因就是ionic1本身就是支援gulp的，在建立好的ionic1專案中就已經包含了gulpfile.js檔案。

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

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

優點：無需引入其他第三方的框架（比如requirejs）即可拆分js檔案，避免了出現超級js檔案

打包壓縮之後，**體積減小，檔案數量減少，節省了載入時間

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

在專案中使用gulp

在專案中使用gulp，需要完成3個工作：

配置gulpgile.js檔案，以及安裝相關gulp外掛程式

angularjs**的改造

修改index.html中對檔案的引用

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**，也就是www/js目錄下的檔案。對於本地的第三方js檔案，最好是放到lib目錄中去，第三方的js基本不會怎麼改變，而且大部分第三方的js**都是已經打包過了的。

gulp.task('minifyjs', function () )) // 壓縮

.pipe(gulp.dest('./www/dist')); // 輸出
});

gulp.task('html2js', function () ))//html模板轉js檔案

.pipe(concat("templates.min.js"))//合併
.pipe(uglify())//壓縮
.pipe(gulp.dest("./www/dist"));//目標路徑
});

gulp.task('minifycss', function () );

var myionic = angular.module('imcyz', ['ionic', 'myionic.controllers', 'myionic.services', 

'myionic.directives', 'myionic.filters', 'ngcordova', 'ioniclazyload', 'ngtouch', 'myionic.templates']);
// 這裡的myionic.templates對應合併壓縮angularjs模板中的modulename
至此也就完成了**的改造以及gulp的配置。
可以單個的執行gulp html2js這樣的命令來合併壓縮模板檔案，也可以通過把任務加到default裡面去，直接乙個gulp命令執行所有要執行的任務。
gulp.task('default', ['html2js','minifycss','minifyjs']);

在命令列執行gulp命令之後，在專案的www目錄下就會多出乙個dist目錄，裡面包含4個檔案。

www/

../dist/
../../myionic.js
../../myionic.min.js
../../myionic.min.css
../../templates.min.js

myionic.js只是所有js檔案的合併，可以在開發的時候使用方便除錯。

myionic.min.js做了混淆，適合用於正式上線的生產環境。

在每個檔案引用裡面加入乙個版本引數v，每次**改變之後都需要變更v的值，這樣就可以達到去快取的效果了！！！

ionic1開發環境搭建配置

本來已經配置好的ionic1的開發環境，偶然又執行了一句 npm install g cordova ionic 結果就是把ionic版本提公升到了3.x，可是之前寫的按1.x寫的，於是需要重新安裝ionic1 的環境 映象，npm都試了，半天下來沒有任何頭緒，就是不能恢復到之前的1.3.1 就在走...

ionic1檔案路徑問題

使用ionic開發專案過程中需要建立公用的html頁面，比如 我們不想使用那我們可以自己建立自定義的html，然後動態載入到不同的html頁面中。html動態載入其他html的時候路徑需要按照index.html檔案的位置作為參考，因為在執行時，其他html 會被動態載入到index.html中貼一...

使用ionic開發移動端專案學習例項（1）

angularjs學習例項 1.開啟git bash，輸入 git clone cd chapter3 git checkout step1 本例項需要伺服器，所以先安裝node，開啟命令列，進入專案目錄，輸入 npm install，安裝成功，輸入node server 在瀏覽器中輸入上述 可以檢...