前端自动化构建-为什么使用前端自动化构建以及gulp简介

前端自动化构建-为什么使用前端自动化构建以及gulp简介

一开始接触到这个东西，真的是不知道是什么样的一个概念，所以也在网上看了一一些资料，理解一下。

1. 前端开发存在的问题

开发慢

(1) 项目架构的问题，没有达到高内聚，低耦合的效果。代码的修改可能导致bug的产生。
(2) 不同人不同的编码风格，如果是各自只负责各自的部分，那改起来还好，但是开发的过程中，应该经常会出现一个文件许多人修改过。那么对于整个代码的阅读会很难。
(3) （本不想加上这个的，因为看起来好像没有什么办法）项目中可能会有很多工具脚本出现，初始目的也是为了加速开发的运行，但是随着工具脚本的增加，无疑增加开发人员的research时间。而且对于工具脚本的修改还需要考虑对其他代码的impact。

闲谈：
对于(1)的问题，现在主要是前端模块化，组件化（没有深入了解过，不多扯）的使用。模块化针对的JS，组件化针对的是htm，js，css。
对于(2)的问题，主要就是项目规范，这个里面不仅仅要有代码规范，应该还有一些日常开发流程的行为，以及一些项目开发过程的记录，文档，API。这其实对于开发过程中是一个很好的手册。

js规范 ： https://github.com/adamlu/javascript-style-guide
html/css 规范 ： http://codeguide.bootcss.com/

所以现在整个项目中不仅仅有代码，还应该有一些必须的文档。

协作慢

首先说一下与开发团体外部的协作
与PM谈需求，开发人员没有完全抓住需求，以及如何将需求在系统中用功能体现出来，这其实在开发流程中需要有着明确的说明(本人现在开发过程中存在着这个问题)。

与后台team合作开发，API接口的确定，以及前端的开发需要后台的数据支持。API接口的确定是需要按照项目规范来的，不是随便由后台/前台确定API,然后等到后面再去修改。针对前端的开发需要后台数据的主持，如果后台没有完成work，好像就会delay前台的工作。如果我们能够有一个东西能够很快的按照API定义的结构与前台进行交互，岂不是前台的开发与后台大大解耦了。

这也是我们的标题中说的前端结构化构建（gulp），gulp主要运行在node中，我们完全可以在前台的project中使用node很快的起一个对应的API，返回给我们对应的数据。

与测试的合作，都说术业有专攻。测试的考虑角度真的对开发有着绝对的校验，所以开发的过程中应该将测试的测试用例拿来，local检测代码的运行，而且gulp可以构建测试环境，这对我们项目上线的过程中bug减量有着很大的意义。而且gulp可以实现自动化测试。

与开发团体内部的协作，主要问题还是规范的问题，多个人操控同一个文件，可能对于一个function，创建的人隔一段事件根本真不知道function已经实现的是什么功能。这个方面主要还是靠开发人员和开发规范。

运行慢

第一种情况：当代码完成，经过测试之后，将build布在production之上，然后测试production环境，发现js中有个字符的问题导致整个程序down掉。很尴尬，如果我们可以在代码完成之后检测一下build的js，那我们就可以查找出来问题，直接修改掉。当然这个步骤属于开发，我放在这个地方，是为了着重指出在项目上生产环境之后出现的恶劣情景。
gulp中有着插件可以对js文件进行检测，后面会学习。

第二种情况：主要就是关于前端性能优化的问题了，这个其实不多说，因为网上有很多的文章，而且本人确实没有什么前端优化的经验，只是了解了一下。gulp在这个优化的过程中起到了很大的作用。
检查js，
编译js，
压缩js/css文件
图片sprit
合并文件
等等

其实这个前端一体化构建的意义就是，加速开发（做一些重复的工作），服务项目合作，前端性能优化。

开发的基础还是靠人，项目开发是不是应该一性能优化为基准呢？写代码的时候就考虑这些事情，前方的路还很长。

2. gulp简介

为何要用构建工具？

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

概念介绍

(1). Stream

Gulp是一个有关Stream（数据流）的构建系统。这句话的意思是，Gulp本身使用了Node的Stream。
Stream是Node.js中非常重要的一个模块，应用广泛。一个流是一个具备了可读、可写或既可读又可写能力的接口，通过这些接口，我们可以和磁盘文件、套接字、HTTP请求来交互，实现数据从一个地方流动到另一个地方的功能。

看到这里可能还是看不出这个Stream的作用。

(2). Pipe

Stream有一个很基本的操作叫做管道（pipe）。Stream是水流，而管道可以从一个流的输出口，接到另一个流的输入口，从而控制流向。如果用前面的流水线工序来说的话，就是连接工序的传输带了。


src.pipe(dst)
其中src和dst都是stream，分别代表源和目标。也就是说，流src的输出，将作为输入转到流dst。此外，这个方法返回目标流（比如这里.pipe(dst)返回dst），因此可以链式调用：

a.pipe(b).pipe(c).pipe(d)

(3). Vinyl文件系统

虽然Gulp使用的是Stream，但却不是普通的Node Stream，实际上，Gulp（以及Gulp插件）用的应该叫做Vinyl File Object Stream。

这里的Vinyl，是一种虚拟文件格式。Vinyl主要用两个属性来描述文件，它们分别是路径（path）及内容（contents）。具体来说，Vinyl并不神秘，它仍然是JavaScript Object。Vinyl官方给了这样的示例：

var File = require('vinyl');


var coffeeFile = new File({
  cwd: "/",
  base: "/test/",
  path: "/test/file.coffee",
  contents: new Buffer("test = 123")
});

从这段代码可以看出，Vinyl是Object，path和contents也正是这个Object的属性。

普通的Node Stream只传输String或Buffer类型，也就是只关注“内容”。但Gulp不只用到了文件的内容，而且还用到了这个文件的相关信息（比如路径）。因此，Gulp的Stream是Object风格的，也就是Vinyl File Object了。到这里，你也知道了为什么有contents、path这样的多个属性了。

(4). vinyl-fs

Gulp并没有直接使用vinyl，而是用了一个叫做vinyl-fs的模块（和vinyl一样，都是npm）。vinyl-fs相当于vinyl的文件系统适配器，它提供三个方法：.src()、.dest()和.watch()，其中.src()将生成Vinyl File Object，而.dest()将使用Vinyl File Object，进行写入操作。

(5). Error

Node的Stream都是Node事件对象EventEmitter的实例，它们可以通过.on()添加事件侦听。
在可能产生错误的插件的位置后面，加入on("error")，就可以做错误处理：

gulp.task("css", function() {
    return gulp.src(["./stylesheets/src/**/*.scss"])
        .pipe(sass())
        .on("error", function(error) {
            console.log(error.toString());
            this.emit("end");
        })
        .pipe(gulp.dest("./stylesheets/dest"));
});

如果你不想这样自己定义错误处理函数，可以考虑gulp-util的.log()方法。

参考：

https://segmentfault.com/a/1190000003770541#articleHeader1