前言
接触Angular和ionic也有一个多月了,一路上连续踩坑.不过也正常，学一门新东西,就得做好踩坑的准备。那么为什么要写这篇构建指南?最大的原因是为了给正在苦苦寻找这方面资料,挣扎于各种说法中的同学一个借鉴,同时我也把自己的经验记录下来,两全其美.
废话不多说，直接上代码：
从安装gulp开始
npm install -g gulp //安装全局gulp
npm install --save-dev gulp //在项目下安装gulp
1、在项目根目录新建gulpfile.js文件，引入需要的gulp插件
var gulp = require('gulp');
var uglify = require('gulp-uglify'); //压缩
var concat = require('gulp-concat');//合并
var ngHtml2Js=require('gulp-ng-html2js');//ng模板合并压缩成js
2、编写gulp任务
//合并压缩angularjs模板
gulp.task('html2js', function () {
return gulp.src("templates/**/*.html")//原路径
.pipe(ngHtml2Js({
moduleName: "template"
}))//html模板转js文件
.pipe(concat("templates.js"))//合并
.pipe(uglify({compress:false}))//压缩
.pipe(gulp.dest("build/js/"));//目标路径
});
执行 gulp html2js
黑魔法配置就是这样。执行命令，发现压缩过的文件不能用了？什么鬼？
坑在这里：
（坑1）
问题出现原因是由于压缩之后变量变成了，e、s、t等，需要依赖注入的方法没有使用中括号注入，而在function的参数中直接使用，导致压缩之后无法识别需要依赖注入的模块。例如：
var module= angular.module('homeApp', ['ui.router']);
module.config(function ($sceProvider) {
$sceProvider.enabled(false);
})
改为：
var module= angular.module('homeApp', ['ui.router']);
module.config(['$sceProvider',function ($sceProvider) {
$sceProvider.enabled(false);
}])
所有的依赖注入都要严格写这种模式，记住是所有！！！
（坑2）
gulp任务里面的， moduleName: "template" 这个参数，是合并过后的文件的模块名字，根据angularjs依赖注入的特性。我们需要把它注入在app.js启动文件里面。
club=angular.module('club', ['ionic','directives','controllers','service','template'])
（坑3）
通过上面的步骤我们可以知道，开发过程中的html模板已经被压缩成了js文件，那么路由配置里面的templateUrl需要怎么跟压缩过后的js模板文件对应呢？其实并没有我们想象的那么复杂，因为gulp-ng-html2js黑魔法已经帮我们做好了，我们只要细心的核对对应关系就可以。
//压缩过后的js模板是这样的，b的内容放到a里面，b是js拼接的html字符串。a就是他的路径或者是id。
$templateCache的put("a","b")
//以上代码在调用上等价于以下代码，内联模板
<script type="text/ng-template" id="a">
//在路由配置里是这样调用的
templateUrl: 'a'
//a参数就是之前开发阶段对应的html页面路径。例如：
templateUrl: 'templates/home/index.html'
</script>
知识点
ng-template知识点参考文章
淘宝npm镜像，cnpm。比npm速度快
Gulp.js官网
angularjs菜鸟教程
结尾：如有什么错误或者不合理的地方，欢迎留言反馈，我将及时更正。谢谢
网友评论