前端自动化（一）

随着前端技术栈的发展，形成了自动化，工程化等相关概念。

工具化

在前端的技术栈发展过程中，出现了很多的工具，形成了工具化，能够用工具完成的绝不要手工完成，来帮助开发者提升效率。
1. 前端工作流工具： Gulp，Grunt
2. 前端js模块编译工具：Babel，Browserify，Webpack
3. 包管理器： npm，bower
4. 前端开发系列工具： livereload，数据mock，代码监控，代码检查。

工程化

工程化是一个发展趋势，以工具化为基础。

工程的核心是流程自动化，又称为构建，这些包括了：代码质量检测，代码压缩，代码合并，代码优化，代码编译，单元测试等等部分。构建就是把这些以工作流程的方式组合起来，然后用一个命令行运行这整个流程。它有点像批处理，但是是程序开发中使用的特殊批处理。

自动化

自动化是以工程化为基础，是在流程自动化上更进一步的自动化。

持续集成就是全自动化的一个终极体现。他的主要流程是：版本控制库 ->构建 ->测试 ->报告.

代码规范

代码规范可以提高代码的可阅读性和避免一些低级错误。为了将代码规范的检查放到前端开发工程中，各种前端语言都有对应的hint或者lint工具。在github官方推出的atom里有众多的插件可以做代码的质量检查，会让开发者在保存代码时即给出相应的提示。向html,css的错误，常规情况下并不容易被发现，有了这些工具就可以改善这一点。

预处理

SASS

甚至为了避免这一点，引入了各种预编译语言，css的预编译less，现在流行的是sass，功能也更加强大，语法错误无法通过编译，来弥补css这种缺陷。

sass的优势很明显：

1. sass提供了很多简便的写法,css预编译,主要的设计思想可以按照编程的思路去编写自己的样式,SCSS在SASS3.0的基础上吸收了Less,形成了现在的SCSS.
2. 易维护，更方便的定制
3. 效率的提升，css3的发展，加上主流浏览器的兼容性不一，hack的处理可以由sass处理.

以及为了提高效率推出了众多的sass库，compass等。

ES6

js的预处理语言也有很多，只是为了让有其他语言经验的开发者更容易的上手js的编码。

因为浏览器的实现大多还是 ES5 的标准，为了使用最新的 ES6 语法，通常的做法是采用 Babel 将 ES6 编译为 ES5。

js模块化

这个过程中，出现了AMD，CMD，UMD这些模块定义模式。
- AMD（Asynchronous Module Definition）: 异步模块定义，可以异步的加载或依赖其他模块，支持的库如 Require.js, Sea.js 。
- CommonJs : 可以将 Javascript 按照 Node 模块的方式定义。
- UMD: 为了兼容 AMD 还是 CommonJsx 风格，出现了 UMD。

AMD例子：

define(['jquery'], function ($) {
    function myFunc(){};
    return myFunc;
});

CMD例子:

var $ = require('jquery');
function myFunc(){};
module.exports = myFunc;

UMD例子：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS-like
        module.exports = factory(require('jquery'));
    } else {
        //Browser globals (root is window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //methods
    function myFunc(){};
    //exposed public method
    return myFunc;
}));

其中，CommonJs 的风格是需要编译的，最终会将多个模块编译为一个 UMD 方式定义的模块。使用webpack[推荐]。

Browserify 是最先出现的 CommonJs 编译工具，使得我们可以像写 Node 模块一样写前端代码，Browserify 可以 build 使用 npm 中的所有模块（只要模块支持在前端中运行）

Webpack 是支持 CommonJs 和 AMD 的模块编译工具，逐渐替代 Browserify, 基于 AMD 的好处就是代码可以异步话，这是 Browserify 无法做到的

文件处理

通常一个前端项目会分有一个 src 目录和 dist 目录， src 放置源码，dist 放置编译后的代码。所以在前端工程的流程中会涉及到文件的拷贝，删除，移动等流程。

开发效率

通常的前端开发过程是，修改前端代码，调用命令编译代码，然后浏览器 F5 刷新。这个过程可以做到自动化，通过代码监控工具，指定要监控的目录和文件，如果对应文件有改变，调用编译工具编译源码，然后通过 livereload 自动刷新浏览器。 gulp-browserify也可以实现同样的功能。

数据的mock

现代化前端项目开发大多是前后端分离的方式，也就是后端基本是提供 API 服务，在真实开发环境中，通常的问题是，后端 API 极其不稳定或者没开发，为了不阻碍前端的开发，通常的做法是，前后端先约定 API 接口定义，然后前端根据定义 mock 接口。

我们可以利用mock工具mock.js来实现。

性能需求

1. 代码压缩
2. 代码合并
3. 图片压缩
4. 雪碧图或者css sprit。

这些过程都可以在前端工程的 build 过程中实现。

前端工作流

为了解决前端工程中复杂的流程，出现了很多开源前端流程处理工具。这些工作流工具不仅仅是其本身，都是一个流程生态体系，每个工具都涉及到对应的插件库，几乎我们能想到的前端工程问题都有对用的插件能够解决。

Grunt和Gulp

目前 Gulp 几乎已经取缔 Grunt ，成为前端的默认流程工具，其核心思想是基于内存的流的方式，提供高效的性能，极简的 API，定义不同的 task，然后将 task 串联起来。

关于gulp，可以参见我的另一篇文章gulp入门1

版本管理工具

git，linux创始人的作品，语法和shell类似，目前最牛的版本管理工具，建议使用命令行，而不是图形化界面，这样是无法领略它的美。

大量的使用，绘制git命令图，完成日常的开发足矣。

后言

目前国内也出现了前端构建工具[实现工程化]，如百度的fis，百度在第3版中说明，编译工具应该具备的3个核心能力：

1. 资源定位: 获取任何开发中所使用资源的线上路径
   分离开发和部署路径之间的关系,静态资源的定位,加上了md5的戳.
   对html的script,link,style的内容，替换url.
   在css中定位url
2. 内容嵌入:把一个文件的内容(文本)或者base64格式的图片嵌入到另一个文件中去。
3. 依赖声明:在一个文本文件内标记对其他资源的依赖关系。

在我们学习自动化的过程中，可以选择多个开源的组合工具，如gulp + webpack + Babel等，也可以选择类似百度的fis这类集成工具。

现在国内的大公司，在招聘前端，一般都会要求会使用这些工具，做到前端自动化的开发，我觉得这是趋势，工具能够简化开发流程，丰富的库也可以提升开发效率，使我们专注于造更小的轮子，我相信，一旦使用了这些工具，就再也回不去了，应为它真的很好用。具体的工具使用我会陆续的在博客中更新，针对性的写一些东西，来完善自己的知识体系。