Gulp构建angularjs项目

前言

接触Angular和ionic也有一个多月了,一路上连续踩坑.不过也正常，学一门新东西,就得做好踩坑的准备。那么为什么要写这篇构建指南?最大的原因是为了给正在苦苦寻找这方面资料,挣扎于各种说法中的同学一个借鉴,同时我也把自己的经验记录下来,两全其美.

废话不多说，直接上代码：

从安装gulp开始

npm install -g gulp //安装全局gulp
npm install --save-dev gulp //在项目下安装gulp

npm包大全，在这里找你要的插件，以及对应的安装命令

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菜鸟教程

结尾：如有什么错误或者不合理的地方，欢迎留言反馈，我将及时更正。谢谢