Angular 用了大量的 Observable。我们经常开发的时候订阅后忘了取消订阅，这容易引起内存泄露，这里介绍两种取消Rxjs订阅的方法。

Async Pipe

| async 异步管道使您可以在 HTML 模板中处理 Observable。异步管道在组件销毁过程后自动运行取消订阅过程。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

@Component({
    selector: 'cool-component',
    template: `
        <ul>
            <li *ngFor="let item of todoList$ | async">{{item.name}}</li>
        </ul>
    `
    ...
})
export class CoolComponent implements OnInit {
    private todoList$: Observable<string>;
    constructor(private httpService: HttpClient) {}
    ngOninit(): void {
        this.todoList$ = this.httpService.get('other-url.com')
    }
}

takeUntil

takeUntil 可以在订阅之前在 .pipe() 方法中调用。 使用此方法，您可以将订阅添加到主题。 如果你有几个订阅，你可以在 ngOnDestroy 事件中使用 .next() 和 .complete() 方法取消订阅

假设您通过 HttpClient 发出多个 AJAX 请求。 您不会将其直接传递给 HTML，而是首先对数据执行其他操作。 所以| 异步管道不适合这种情况。现在您有多个订阅！我们怎样才能一次全部退订而不是一个一个退订呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

@Component({...})
export class CoolComponent implements OnInit, OnDestroy {
    private unsubscribe$ = new Subject<void>;
    constructor(private httpService: HttpClient) {}
    ngOninit(): void {
        this.httpService.get('some-url.com')
                .pipe(takeUntil(this.unsubscribe$))
                .subscribe((values) => {
                    // Do something with the data
                })
        
        this.httpService.get('other-url.com')
                .pipe(takeUntil(this.unsubscribe$))
                .subscribe((values) => {
                    // Do something with the data
                })
    }
    ngOnDestroy(): void {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }
}

在 get() 方法之后有一个 pipe(takeUntil(this.unsubscribe$))。 通过 takeUntil，我们将这个 Observable 的引用添加到 unsubscribe$ 主题。在订阅过程中，Subject 持有对两个 Observable 的引用。

在要销毁组件之前调用 ngOnDestroy() 方法, 在这个方法中，我们调用了两个方法,next() 将向订阅传递一个空值, 使用 complete()，我们告诉订阅它已完成侦听新值。现在我们不必担心通过 HttpClient 发出一个或多个请求； 我们可以立即阻止他们。

前面讲了很多理论，那么这一节我们将讲一些实战的例子

安装Node.js

先在命令行下输入 node -v 检查一下是否装了node, 如果没有请参考 https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager 安装

然后再用 npm -v 来确保Node.js 安装正确

安装 Gulp

我们可以使用npm来安排装Gulp, 为了可以在命令行全局使用，我们安装到全局，另外确保其它的程序员可以使用，我们保存到项目的package.json里

1

npm install gulp -g

创建项目

创建一个文件目录，然后建立对应的文件夹

• src — 源文件:

  • images 
  • scripts 
  • styles 

• build — 编译后文件输出到的生产文件夹:

  • images 
  • scripts 
  • styles 

我们先使用npm init来创建类似Nuget package的package.config一样的文件，这样我们就知道项目依赖哪些插件，而且我们不需要把插件提交到代码库，其它程序员只需要使用 npm install 就可以安装所有配置的插件

然后我们需要创建一个gulpfile.js文件，gulp默认是调用这个文件的。

我们在目录下使用

  npm install gulp --save-dev  # 这样可以把gulp安装到本地

使用插件

比如我们想检查我们的js文件，那么我们需要安装 gulp-jshint插件

1

npm install gulp-jshint --save-dev

然后添加一个test.js文件到src/scripts下，内容如下

1
2
3
4
5

var hi="hello"

function sayHello(){
    console.log("Jack "+hi)
}

jshint 代码检查

然后我们修改gulpfile.js内容如下

1
2
3
4
5
6
7
8
9
10
11
12

// include gulp
var gulp = require('gulp'); 

// include plug-ins
var jshint = require('gulp-jshint');

// JS hint task
gulp.task('jshint', function() {
    gulp.src('./src/scripts/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('default'));
});

然后运行

gulp jshint

看控制台输出就知道我们少了分号。

代码合并压缩

我们新建一个 ./scripts/b.js， 然后我们把js文件合并然后压缩并输出到./build/scripts/all.js 下，同时移除debug信息

我们需要安装一下插件

1
2
3

npm install gulp-concat --save-dev 
npm install gulp-strip-debug --save-dev 
npm install gulp-uglify --save-dev

修改gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12

var gulp = require('gulp'); 
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');

gulp.task('scripts', function() {
  gulp.src(['./src/scripts/*.js'])
    .pipe(concat('all.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts/'));
});

我们看到gulp已经把我们文件合并了，移除了console.log, 而且进行了压缩。

至此，已经基本上知道gulp怎么使用了，下面展示一些其它的功能的代码

1
2

npm install gulp-autoprefixer --save-dev 
npm install gulp-minify-css --save-dev 

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var gulp = require('gulp'); 
var concat = require('gulp-concat');
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');

gulp.task('scripts', function() {
  gulp.src(['./src/scripts/*.js'])
    .pipe(concat('all.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(gulp.dest('./build/scripts/'));
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// CSS concat, auto-prefix and minify
gulp.task('styles', function() {
  gulp.src(['./src/styles/*.css'])
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./build/styles/'));
});

// default gulp task
gulp.task('default', [ 'scripts', 'styles'], function() {   

// watch for JS changes
gulp.watch('./src/scripts/*.js', function() {
    gulp.run('jshint', 'scripts');
  });
// watch for CSS changes
    gulp.watch('./src/styles/*.css', function() {
        gulp.run('styles');
  });
});

至此，大家应该熟悉gulp的使用，尽情去挖掘gulp plugin的宝藏吧。

gulp 本身能做的事情非常少，主要是通过插件来提供各种功能，gulp本身只提供了4个非常简洁的API, 掌握这4个API你就基本掌握了gulp的全部。

一、gulp.task

gulp 是基于task的方式来运行

定义

gulp.task(name [, deps, fn])
注册一个task, name 是task的名字，deps是可选项，就是这个task依赖的tasks, fn是task要执行的函数

示例

1
2
3
4
5
6
7

gulp.task('js', ,['jscs', 'jshint'], function(){
 return gulp
    .src('./src/**/*.js')
    .pipe(concat('alljs'))
    .pipe(uglify())
    .pipe(gulp.dest('./build/'));                 
});

提示

上例中

• jscs和jshint先运行，随后再运行js的task.
• jscs和jshint是并行执行的，而不是顺序执行

二、gulp.src

定义

gulp.src(globs[, options])

与globs 匹配的文件，可以是string或者一个数组

示例

1
2
3
4
5
6
7
8
9

gulp.src(['client/*.js', '!client/b*.js', 'client/c.js'])   # !是排除某些文件

gulp.task('js',['jscs', 'jshint'],function(){
 return gulp
    .src('./src/**/*.js', {base:'./src/'})        
    .pipe(uglify())
    .pipe(gulp.dest('./build/'));
             
});

options.base 是指多少路径被保留，比如上面的 ./src/users/list.js 会被输出到 ./build/users/list.js

提示

如果我们需要文件保持顺序，那么出现在前面的文件就写在数组的前面

1

gulp.src(['client/baby.js', 'client/b*.js', 'client/c.js'])  

上面baby.js就出现在最上面。

三、 gulp.dest

定义

gulp.dest(path[, options]) 就是最终文件要输出的路径，options一般不用

四、gulp.watch

定义

gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb]) 就是监视文件的变化，然后运行指定的Tasks或者函数，这个相比Grunt需要使用插件，gulp本身就支持的很好。

示例

1
2
3
4
5
6
7
8
9

gulp.task('watch-js', function(){
   gulp.watch('./src/**/*.js',['jshint','jscs']); 
});

gulp.task('watch-less', function(){
 gulp.watch('./src/**/*.less',function(event){
   console.log('less event'+event.type+' '+event.path)
 }); 
});

最后

gulp就是如此的简单，你只需要掌握这四个API就够了，剩下的就是熟悉相关的plugin了。

参考链接 https://github.com/gulpjs/gulp/blob/master/docs/API.md

在上一篇 前端构建大法 Gulp 系列 (一)：为什么需要前端构建 中，我们说了为什么需要前端构建，简单一句话，就是让我们的工作更有效率。

相信熟悉前端的人对Grunt一定不陌生，实际上我自己之前的很多项目也是在用Grunt, Grunt的出现是前端开发者的福音，大大减少了前端之前很多手工工作的繁琐以及我上一篇 前端构建大法 Gulp 系列 (一)：为什么需要前端构建 提到的那些问题。

那么既然Grunt可以做到几乎所有的事情，那么为什么我们需要Gulp呢？

Grunt与Gulp的区别

我们来看一下一般前端构建的流程

二者处理流程的区别

Grunt 的方式

Gulp的方式

配置的简洁程度

Grunt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
  pkg: grunt.file.readJSON('package.json'),
  uglify: {
    options: {
      banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
    } ,
    build: {
      src: 'src/<%= pkg.name %>.js',
      dest: 'build/<%= pkg.name %>.min.js'
    }
  }
});
 
grunt.loadNpmTasks('grunt-contrib-uglify'); 
grunt.registerTask('default', ['uglify']);
};

Gulp

1
2
3
4
5
6
7
8

gulp.task('default',function(){    
return gulp
        .src("**/*.js")
        .pipe(jshint())
        .pipe(concat())
        .pipe(uglify())
        .pipe(gulp.dest('./build/'))        
})

所以从上面的一些代码对比来看，Gulp明显比Grunt要简洁易用很多。

最后，总结一些 Grunt的一些问题

• 配置过于复杂
• 插件职责不单一 （就是不SRP）
• 临时文件目录多
• 性能慢 （因为临时文件多，自然读IO多)

下一篇我们将开始学习如何使用gulp来构建我们的前端。

我们都知道使用IDE编写后端程序时，我们都需要Build, 对.NET来说，我们一般需要使用Visual Studio来确保我们的项目编译通过，而且项目编译通过是对所有程序员的基本要求。

但是，由于很多后端程序员对前端的很多东西不了解，导致在做WEB项目时出现了一些问题。

JavaScript和CSS的版本问题

我们都知道 JavaScript和CSS属于静态文件，如果地址不变，浏览器会缓存这些文件，那就意味着当我们需要改JavaScript或者CSS文件的时候，即使我们后端改了，那么客户端也是看不到，这个在“JS一统天下”的时代是不可接受的，因为现在几乎所有的WEB 程序都严重依赖JavaScript，而所有的网站都是需要使用CSS的。在我经历过的项目即使是很多年经验的程序员都出现过JavaScript和CSS文件的版本问题，比如客户让修复一个Bug，这个Bug是JavaScript引起的，程序员修复了，或者是客户说改一个背景颜色，可是当我们给客户部署后或者代码交给客户客户部署时，客户说Bug依然存在，这个时候程序员经常说的话就会出现了 “我本地是好的呀”，最后再找来别人帮忙后，发现原来是没有清除浏览器的缓存，于是有的程序员就赶紧给客户说：“你需要Ctrl+F5 清除浏览器的缓存”。 每当我听到这样的话时就像关上灯留给我一屋子黑，首先，有几个普通用户会使用Ctrl+F5？ 其次，有几个用户愿意去Ctrl+F5?

那么怎么办？我想很多程序员都知道加一个版本号就可以了，这样浏览器就会认为是新的文件，比如原来是 http://www.a.com/app.js 你现在只需要把地址改为http://www.a.com/app.js?v=1.0 即可

但是如果这个动作是手动的，那么10次基本上至少有5次程序员会忘掉，那么这就是为什么我们需要前端构建

JavaScript和CSS的依赖问题

我们经常出现的另一个问题，就是JavaScript和CSS的依赖问题，说的通俗点就是JavaScript和CSS的在页面中的顺序问题！

我们经常发现CSS没起作用，JavaScript的某个变量和方法找不到，有很多情况都是因为引入JavaScript或者CSS的顺序不对，虽然我们可以使用一些RequireJS之类的模块管理，但是依然在很多情况下需要引入不同的文件，尤其是CSS没有一个好的模块化管理的组件。

那么我们就需要有一个统一的地方来管理JavaScript和CSS的顺序问题，而构建工具可以大大减少此类问题。

性能优化

我们都知道浏览器请求的文件越多越耗时，请求的文件越大越耗时，尤其是在我们现在很多使用前端MVC, MVVM框架的时候，我们为了前端代码更清晰，结构更合理，我们就由很多JS文件，无疑又拖慢了网页的速度。为了解决这个问题，因此我们需要做两件事

文件合并

浏览器需要下载多个JS文件，而浏览器是有并发限制，也就是同时并发只能下载几个文件，假如浏览器并发数是5，你有20个JS文件，而每5个需要2S, 那么你光下载JS文件都需要8S，那么网页的性能可想而知，所以我们需要合并多个文件以减少文件的数量。

文件压缩

我们知道文件越大，下载越慢，而针对JavaScript和CSS, 里面的空格，换行这些都是为了让我们读代码时更容易阅读，但是对机器来说，这些对它没有影响，所以为了减少文件大小，一般的情况我们都会用工具去掉空格和换行，有时候我们还会用比较短的变量名(记住这个要让工具最后压缩时做，而源代码一定要保证命名可读性) 来减少文件大小。

而所有的前端构建工具都具有文件合并和压缩的功能。

效率提升

Vendor前缀

在CSS3使用越来越多的时候，我们都知道一些CSS的特性，不同的浏览器CSS有不同的前缀，如果我们手工添加将会很繁琐，而如果使用构建工具，很多构建工具可以自动给我添加CSS的Vendor前缀

单元测试

JavaScript的单元测试在使用MVC或者MVVM的框架后，变得越来越容易，而单元测试是质量保证的一个很重要的手段，所以在提交之前，使用构建工具自动跑一遍我们的单元测试是非常重要的

代码分析

我们写的JavaScript很多时候会有一些潜在的bug, 比如忘了添加分号，某个变量没有等等，使用一些JavaScript的代码分析工具，可以很好的帮我们检查一些常见的问题。

HTML引用JavaScript或者CSS文件

比如我们需要使用Bower之类来引用前端JavaScript和CSS的第三方库，那么如果版本升级，添加移除等都用手工来修改HTML的话，第一比较耗时，第二比较容易疏漏，尤其是在我们需要切换Debug和production版本时将会有很多额外的工作，那么使用前端构建工具可以很好的解决这些问题。

最后

以上我只是列出了前端构建最常用的一些功能，我相信还可以发觉很多构建工具可以替代我们手工做的事，后面我将详细讲讲如何使用Gulp这个神器来一一解决我们上面提到的问题。