【www.bbyears.com--php框架模板】
发布ioinc程序主要通过gulp任务和cordova hook方式进行，前者是目前前端最流行的构建工具，后者在cordova（ionic框架底层的实现）构建过程中插入自定义的任务，从而通过对构建过程的干预达到最终发布的目的。通常来说，正式发布ionic程序需要做以下工作：
对js代码进行语法检验（Lint）（cordova hook），保证js代码的正确性，才能在后面进行正确的混淆处理
把html模板文件转换为angular模板（gulp任务），从而加快程序的运行速度
开启agular的严格注入模式（gulp任务），相当于对angular进行lint检验，这一点也是为了保证后面正确的混淆处理
合并css和js文件并替换html中的引用（gulp任务），将代码中的css和js文件进行合并
压缩和混淆代码（cordova hook），因为ionic基于Cordova框架，因此这里使用cordova hook的方式进行，也可以使用gulp任务具体来写
下面分别进行详细的描述：
1. 对js代码进行语法检验（Lint）（cordova hook）
首先在项目根目录下执行下面的命令安装jshint
npm install jshint --save-dev
npm install async --save-dev
然后在工程目录下面创建hooks目录，这里里面是存放cordova hook的文件，然后创建before_prepare目录并将这里的文件放入其中，主要有一个02_jshint.js文件。
2. 把html模板文件转换为angular模板（gulp任务）
首先在项目根目录下执行下面的命令安装gulp-angular-templatecache
npm install gulp-angular-templatecache --save-dev
接下来打开gulpfile.js，增加下面的代码：
var templateCache = require("gulp-angular-templatecache");
// 在paths下面增加对tempate目录的设置
var paths = {
sass: ["./scss/**/*.scss"],
templatecache: ["./www/templates/**/*.html"]
};
gulp.task("templatecache", function (done) {
gulp.src(paths.templatecache)
.pipe(templateCache({standalone:true, root: "templates"}))
.pipe(gulp.dest("./www/js")) // 将处理好的js文件放在www/js下面，方便后面的合并
.on("end", done);
});
在app.js中增加对上面自动生成的templates模块的引用：
angular.module("app", ["ionic", "controllers", "templates"])
在index.html中引入对templates.js文件的引用
<script src="js/templates.js"></script>
3. 开启agular的严格注入模式（gulp任务）
首先在项目根目录下执行下面的命令安装gulp-ng-annotate
npm install gulp-ng-annotate --save-dev
然后编写gulpfile.js文件，增加ng_annotate任务：
var ngAnnotate = require("gulp-ng-annotate");
// 在paths下面增加ng_annotate的目录
var paths = {
sass: ["./scss/**/*.scss"],
templatecache: ["./www/templates/**/*.html"],
ng_annotate: ["./www/js/*.js"]
};
// angular注入验证
gulp.task("ng_annotate", function(done) {
gulp.src(paths.ng_annotate)
.pipe(ngAnnotate({single_quotes: true}))
.pipe(gulp.dest("./www/dist/dist_js/app"))
.on("end", done);
});
上面的ng_annotate任务会自动将js中的angular用的引用加上，比如原始代码为
angular.module("app.controllers", []).controller("LoginCtrl", function($scope) {});
经过上面的插件会自动处理成
angular.module("app.controllers", []).controller("LoginCtrl", "$scope", function($scope) {});
并将新的文件放在www/dist/dist_js/app目录下，因此接下来需要在index.html文件中修改对原来js的引用并在body标签中添加上ng-strict-di属性：
<script src="dist/dist_js/app/app.js"></script>
...
...
4. 合并css和js文件并替换html中的引用（gulp任务）
合并和替换css、js文件需要使用gulp-useref模块，在项目根目录下执行下面命令进行安装：
npm install gulp-useref --save-dev
然后编写gulpfile.js文件增加useref任务：
var useref = require("gulp-useref");
// 在paths下面增加ng_annotate的目录
var paths = {
sass: ["./scss/**/*.scss"],
templatecache: ["./www/templates/**/*.html"],
ng_annotate: ["./www/js/*.js"],
useref: ["./www/*.html"]
};
// useref任务
gulp.task("useref", function (done) {
var assets = useref.assets();
gulp.src(paths.useref)
.pipe(assets)
.pipe(assets.restore())
.pipe(useref())
.pipe(gulp.dest("./www/dist"))
.on("end", done);
});
useref使用特殊的注释标签对标签内的css或js文件进行合并，因此修改index.html文件
<script src="dist/dist_js/app/app.js"></script>
<script src="dist/dist_js/app/controllers.js"></script>
<script src="dist/dist_js/app/routes.js"></script>
<script src="dist/dist_js/app/services.js"></script>
<script src="dist/dist_js/app/directives.js"></script>
<script src="dist/dist_js/app/templates.js"></script>
对于不需要合并的资源文件可以不加build:xx注释。
5. 压缩和混淆代码（cordova hook）
最后使用cordova hook的方式压缩和混淆代码，需要用到cordova-uglify和mv模块，在项目根目录下执行下面的命令进行安装：
npm install cordova-uglify --save-dev
npm instal mv --save-dev
npm instal uglify-js --save-dev
npm instal clean-css --save-dev
npm instal ng-annotate --save-dev
然后将这个里面的js文件下载下来放到hooks/after_prepare目录下，在安装cordova-uglify的时候，会自动在hooks/after_prepare目录下创建一个uglify.js文件，因为上面的文件中已经有了060_uglify.js，因此将uglify.js文件删除即可。
经过上面的设置之后，就对整个的发布流程进行了修改和处理，最后还需要做一些后续的工作。首先将上面的gulp任务加入到default和watch任务中，修改gulpfile.js如下：
gulp.task("default", ["sass", "templatecache", "ng_annotate", "useref"]);
gulp.task("watch", function() {
gulp.watch(paths.sass, ["sass"]);
gulp.watch(paths.templatecache, ["templatecache"]);
gulp.watch(paths.ng_annotate, ["ng_annotate"]);
gulp.watch(paths.ng_annotate, ["useref"]);
});
然后还需要在ionic.project文件中加入gulpStartupTasks，让ionic项目启动的时候自动执行gulp任务：
{
"name": "hello",
"app_id": "",
"gulpStartupTasks": [
"sass",
"templatecache",
"ng_annotate",
"useref",
"watch"
]
}
另外，如果是在linux或mac系统下，还需要使用chmod +x 命令启用hooks目录下面的所有js文件的执行权限。
最后执行正确的ionic命令就会自动执行上述的过程并进行发布，比如ioinc build browser。如果发现Errors in file www/js/xxx.js的提示，则说明代码不太严格，出现了错误，根据提示对代码进行修改，直到执行成功为止。另外，在开发的时候执行ioinc serve browser命令的时候，也会自动监控文件的变化并执行gulp任务。
gulpfile.js文件内容如下：
var gulp = require("gulp");
var gutil = require("gulp-util");
var bower = require("bower");
var concat = require("gulp-concat");
var sass = require("gulp-sass");
var minifyCss = require("gulp-minify-css");
var rename = require("gulp-rename");
var sh = require("shelljs");
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("templatecache", function (done) {
gulp.src(paths.templatecache)
.pipe(templateCache({standalone:true, root: "templates"}))
.pipe(gulp.dest("./www/js"))
.on("end", done);
});
// angular注入验证
gulp.task("ng_annotate", function(done) {
gulp.src(paths.ng_annotate)
.pipe(ngAnnotate({single_quotes: true}))
.pipe(gulp.dest("./www/dist/dist_js/app"))
.on("end", done);
});
// 压缩合并css/js文件
gulp.task("useref", function (done) {
gulp.src(paths.useref)
.pipe(useref())
.pipe(gulp.dest("./www/dist"))
.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("install", ["git-check"], function() {
return bower.commands.install()
.on("log", function(data) {
gutil.log("bower", gutil.colors.cyan(data.id), data.message);
});
});
gulp.task("git-check", function(done) {
if (!sh.which("git")) {
console.log(
" " + gutil.colors.red("Git is not installed."),
"\n Git, the version control system, is required to download Ionic.",
"\n Download git here:", gutil.colors.cyan("http://git-scm.com/downloads") + ".",
"\n Once git is installed, run \"" + gutil.colors.cyan("gulp install") + "\" again."
);
process.exit(1);
}
done();
});