前端工程

       要解决前端工程化的问题，可以从两个方面入手：开发和部署。

       从开发的角度，要解决的问题包括：1 提高开发生产效率；2 降低维护难度。

       这两个问题的解决方案有两点：

        1   制定开发规范，提高团队协作能力；

        2   分治。软件工程中有个很重要的概念叫模块化开发，其中心思想就是分治。

从部署角度，要解决的问题主要是资源管理，包括：代码审查、压缩打包、增量更新、单元测试。要解决上诉问题，需要引入构建/编译阶段。

        构建工具：要完成前端工程化，少不了工程化工具，requireJS与grunt的出现，改变了业界前端代码的编写吸习惯，同时他们也推动了前端工程化的一个基础。

       requireJS是一个伟大的模块加载器，他的出现让javascript制作多人维护的大型项目变成事实，grunt是一款javascript构建工具，主要完成压缩，合并，图片压缩合并等一系列工作，后续又出了yeoman、Gulp、webpack等构建工具。

       这里要记住一件事，我们的目的是完成前端工程化，无论什么模块加载器，构建工具，都是为了帮助弯沉目的，工具不重要，目的和思想才是重要。所以在完成前端工程化前讨论哪个加载器好，哪种构建工具好都是舍本逐末。

     什么是前端自动化

1  自动编译（less，sass等自动编译）

2  自动合并（将页面引入的多个js文件，或者css文件，合并为同一个且压缩的）

3  自动刷新（IDE保存，浏览器不用刷新，自动看到效果）

4  自动部署（自动将项目打包部署到指定目录）

5  自动同步（能够方便实现多个浏览器窗口，同步点击、输入、调试）

环境搭建--》工具搭建--》项目架构搭建

1  环境搭建 Node.js与npm

node.js是一个基于Chrome V8引擎的javascript的运行环境，其特点是单线程、事件驱动、非阻塞I/O模型，非常轻便高效，其包管理工具npm，是全球最大的开源库生态系统。

node.js是做什么的？

    本来浏览器在显示我们看到的网站时，会做很多事情，页面渲染，js渲染等，然后node把其中js渲染的引擎拿出来，并使用谷歌的V8，然后在其外面又封装了一层api，让其拥有文件读写，网络等操作，提供一个服务端的运行环境，但是运行的却是javascript。

       npm是随同nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题。

2  工具的搭建Gulp、Grunt、webpack、browserify

Gulp/Grunt  简化前端流程

Gulp/Grunt是工具链、构建工具，他们能够优化前端工作流程。比如自动刷新页面、combo、压缩css/js，编译less等等。使用Gulp/Grunt，然后配置你需要的插件，就可以替代手工实现自动化工作。（全局安装Gulp是为了执行Gulp任务，在本地安装Gulp是为了调用Gulp的插件功能）

 Browserify/webpack  JS模块化方案

 browserify/webpack：是文件打包工具，可以把项目的各种js、css文件等打包合并成一个或者多个文件，主要用于模块化方案，预编译模块的方案。因为它是预编译的，所以不需要在浏览器中加载解释器。你可以在本地直接写JS，不管是AMD/CMD/ES6风格的模块化，它都认识，并且编译成浏览器认识的JS。

3  项目构建搭建

package.json

package.json是基于node.js项目必不可少的配置文件，它是存放在项目根目录的普通js文件。

可以通过npm init来新建一个package.json文件

脚手架：安装vue的脚手架  npm install vue-cli；安装react的脚手架  npm install create-react-app

脚手架是一种“元编程”的方法，用于构建基于数据库的应用。许多MVC框架都是使用的这种思想。程序员编写一份规格说明书，来描述怎样去使用数据库，而由（脚手架的）编译器来根据这份规格说明书生成响应的代码，进行增删改查数据的操作，我们把这种方式称作为：脚手架，在脚手架上面去更高效的搭建应用。

配置超长时间的本地缓存 —— 节省带宽，提高性能
采用内容摘要作为缓存更新依据 —— 精确的缓存控制
静态资源CDN部署 —— 优化网络请求
更资源发布路径实现非覆盖式发布 —— 平滑升级