当Angular应用发布时，开发者需要考虑以下问题：
- Concat : 合并多个js文件到一个js文件以减少Client端对Server端的请求次数，并提高下载速度
- Minify：去除js文件中的注释和空行，以减少js文件大小
- Uglify：混淆js文件中的变量名，方法名等，以提高js文件在客户端的安全性
以上问题可以通过Gulp工具实现自动处理，以提高开发效率，加快发布流程
Gulp.js是一款基于Nodejs开发的自动化工具库，通过编写Gulp脚本可以轻松实现自动化工作流程，Gulp十分适用于Angular应用开发，主要原因包括Gulp脚本使用javaScript撰写，许多第三方Gulp plugins提供应用于前端开发的任务。
首先安装Nodejs和其工具管理器npm
在命令行下全局安装Gulp运行环境
$ npm install -g gulp在开发根目录下安装Gulp依赖
$ npm install gulp --save-dev在开发根目录下创建
gulpfile.js文件编辑gulpfile文件， 创建任务脚本
在开发根目录下命令行运行
$ gulpGulp将开始执行gulpfile文件中的任务脚本
Gulp社区十分活跃， 许多开源插件可以满足开发中遇到的各种任务自动化问题， 常用插件包括：
gulp-concat.js 自动合并多个文件到一个文件，支持js, ts, css, html的多种格式。
gulp-typescript.js 自动编译ts文件
gulp-ngmin.js 自动minify Angular应用
gulp-uglify.js 自动最小化和混淆js文件
gulp-rename.js 自动更换文件名
下面通过一个Demo，描述Gulp使用流程， 这个Demo实现了自动将现在NG 7.0 Client端 所有controller 和 directive 合并为一个js文件并最小化
app
| ---- dist
| ---- js
| ---- | ---- controller
| ---- | ---- directive
controller 和 directive是包含各自模块中的controller和directive文件，我们想每次发布时都将这两个文件夹下所有js文件合并为一个netbrain.js文件，和最小化的netbrain.min.js 并保存在dist文件夹下
app
| ---- dist
| ---- | ---- netbrain.js
| ---- | ---- netbrain.min.js
| ---- js
| ---- | ---- controller
| ---- | ---- directive
使用Gulp可以自动完成这个流程, 具体脚本如下：
/*
* 加载Gulp和相应插件
*/
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var ngmin = require('gulp-ngmin');
/*
* 合并js/controls 和 js/directive文件夹里所有jts文件到netbrain.js
*/
gulp.task('concat', function () {
return gulp.src([
'./js/controls/**/*.js',
'./js.directive/**/*.js'
])
.pipe(concat('netbrain.js'))
.pipe(gulp.dest('dist/'));
});
/*
* 最小化和混淆netbrain.js文件并保存到netbrain.min.js文件中
*/
gulp.task("uglify", ['concat'], function () {
return gulp.src('./dist/netbrain.js')
.pipe(ngmin())
.pipe(uglify({ mangle:false }))
.pipe(rename('netbrain.min.js'))
.pipe(gulp.dest('./dist/'))
});
/*
* default的任务
*/
gulp.task('default', ['uglify'], function () {
});
编辑好gulfile.js之后，只需要在app根目录下运行$ gulp 即可执行任务