使用Gulp自动化处理发布流程

当Angular应用发布时，开发者需要考虑以下问题：

Concat : 合并多个js文件到一个js文件以减少Client端对Server端的请求次数，并提高下载速度

Minify：去除js文件中的注释和空行，以减少js文件大小

Uglify：混淆js文件中的变量名，方法名等，以提高js文件在客户端的安全性

以上问题可以通过Gulp工具实现自动处理，以提高开发效率，加快发布流程

Gulp介绍

Gulp.js是一款基于Nodejs开发的自动化工具库，通过编写Gulp脚本可以轻松实现自动化工作流程，Gulp十分适用于Angular应用开发，主要原因包括Gulp脚本使用javaScript撰写，许多第三方Gulp plugins提供应用于前端开发的任务。

Gulp使用流程

首先安装Nodejs和其工具管理器npm
在命令行下全局安装Gulp运行环境

$ npm install -g gulp
在开发根目录下安装Gulp依赖

$ npm install gulp --save-dev
在开发根目录下创建 gulpfile.js 文件
编辑gulpfile文件，创建任务脚本
在开发根目录下命令行运行

$ gulp
Gulp将开始执行gulpfile文件中的任务脚本

Gulp Plugins

Gulp社区十分活跃，许多开源插件可以满足开发中遇到的各种任务自动化问题，常用插件包括：

gulp-concat.js 自动合并多个文件到一个文件，支持js, ts, css, html的多种格式。
gulp-typescript.js 自动编译ts文件
gulp-ngmin.js 自动minify Angular应用
gulp-uglify.js 自动最小化和混淆js文件
gulp-rename.js 自动更换文件名

Gulp使用举例

下面通过一个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 即可执行任务

MarkoCen/Gulp流程介绍.md

使用Gulp自动化处理发布流程

Gulp介绍

Gulp使用流程

Gulp Plugins

Gulp使用举例