本文主要参考了:Production ready apps with Ionic Framework
1、安装相关module
npm install jshint --dev-save
npm install async --dev-save
npm install cordova-uglify --dev-save
npm install gulp --dev-save
npm install gulp-util --dev-save
npm install gulp-concat --dev-save
npm install gulp-sass --dev-save
npm install gulp-minify-css --dev-save
npm install gulp-rename --dev-save
npm install gulp-angular-templatecache --dev-save
npm install gulp-ng-annotate --dev-save
npm install gulp-useref --dev-save
2、下载相关文件到before_prepare目录下，并赋予可执行权限
3、下载相关文件到after_prepare目录下，并赋予可执行权限
4、删除after_prepare目录下的uglify.js文件
5、编辑根目录下的gulpfile.js文件，加入如下相关代码：
如下步骤主要借助于gulp(根据需要实际需要，自行添加以及修改)
var templateCache = require('gulp-angular-templatecache');
var ngAnnotate = require('gulp-ng-annotate');
var useref = require('gulp-useref');
var paths = {
sass: ['./scss/**/*.scss'],
templatecache: ['./www/templates/**/*.html'],
ng_annotate: ['./www/js/*.js'],
useref: ['./www/*.html']
};
gulp.task('default', ['sass', 'templatecache', 'ng_annotate', 'useref']);
gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass())
.on('error', sass.logError)
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.templatecache, ['templatecache']);
gulp.watch(paths.ng_annotate, ['ng_annotate']);
gulp.watch(paths.useref, ['useref']);
});
gulp.task('templatecache', function (done) {
gulp.src('./www/templates/**/*.html')
.pipe(templateCache({standalone:true}))
.pipe(gulp.dest('./www/js'))
.on('end', done);
});
gulp.task('ng_annotate', function (done) {
gulp.src('./www/js/*.js')
.pipe(ngAnnotate({single_quotes: true}))
.pipe(gulp.dest('./www/dist/dist_js/app'))
.on('end', done);
});
gulp.task('useref', function (done) {
gulp.src('./www/*.html')
.pipe(useref())
.pipe(gulp.dest('./www/dist'))
.on('end', done);
});
6、编辑ionic.project文件(如果没有，请执行ionic serve):
"gulpStartupTasks": [
"sass",
"templatecache",
"ng_annotate",
"useref",
"watch"
]
7、修改app.js文件：
- 添加
templatesangular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'templates']) - 更新
templateUrl
打开dist/dist_js/app/templates.js文件，形如：
$templateCache.put('tab-account.html'
而你的app.js文件与之对应的是:
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'templates/tab-account.html',
controller: 'AccountCtrl'
}
}
})
则，你要修改成:
.state('tab.account', {
url: '/account',
views: {
'tab-account': {
templateUrl: 'tab-account.html',
controller: 'AccountCtrl'
}
}
})
以此类推
8、编辑index.html文件
两个地方需要修改，css & js
主要借助于gulp-useref
替换掉css文件：
<!-- build:css dist_css/styles.css -->
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.app.css" rel="stylesheet">
<!-- endbuild -->
替换掉相关的js文件:
原js引用:
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
替换之后的：
<!-- your app's js -->
<!-- build:js dist_js/app.min.js -->
<script src="dist/dist_js/app/templates.js"></script>
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/services.js"></script>
<!-- endbuild -->
添加 ng-strict-di 到 ng-app,修改之后的index.html形如(ionic start XXX 创建的一个demo工程文件):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<!-- build:css dist_css/styles.css -->
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.app.css" rel="stylesheet">
<!-- endbuild -->
<!-- build:css dist_css/test.css -->
<link href="css/style.css" rel="stylesheet">
<!-- endbuild -->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<!-- build:js dist_js/app.min.js -->
<script src="dist/dist_js/app/templates.js"></script>
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/services.js"></script>
<!-- endbuild -->
</head>
<body ng-app="starter" ng-strict-di>
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
9、Over
网友评论