ES6在浏览器直接是跑不起来的；
1.基础架构
-
前端架构思想
（需要放哪些目录、哪些文件、为什么要这么放、合理性在哪、结合之前说的模块化， 整个围绕技术架构去做--如何创建一个前端项目基础架构组的关系） -
业务逻辑
--页面 html、css
--交互 js（操作页面和服务器交互） -
自动构建
-
辅助的js脚本
（把业务逻辑方面的js和资源文件做一个处理最后上线） -
编译
把ES6编译成ES5甚至是ES3；看项目需要（大多数公司已经支持到IE8）
（IE6/7/8跑ES5是不可行的，ES5也不是所有浏览器都支持的，需要编译到ES3才能让低级浏览器去执行） -
辅助
-
自动刷新
页面中引入了a.js，当a.js内容发生变化的时候，（之前的做法是主动刷新这个页面），引发了自动编译，编译以后又自动的帮我们刷新浏览器（非常实用可以让开发效率变的很高） -
文件合并
-
资源压缩
js、css压缩、图片转成base64编码 -
服务接口
（promise、异步操作、数据结构变换依赖服务接口）部署一个服务器让服务器提供一些数据、接口
--数据
--接口
-
2.任务自动化（gulp）
--sass转成css让浏览器识别，有一个编译的过程。
编译：开发用的是这个语言，真正让浏览器识别的是另一种语言；中间有一个编译的过程； 这个过程需要自动化处理，包括文件合并、项目依赖、文件压缩、模块化依赖；
怎么去做自动依赖编译的呢？
* 涉及自动化任务；
* 让机器自动去完成，目标减少人工操作、提高效率；
什么是任务自动化
--减少人工操作，让机器自动监听所有的操作，然后响应；
什么是gulp
--gulp就是用来解决自动化构建工具的，增强你工作流程的工具；
（gulp流行之前是grunt的天下，grunt自身的缺点：项目复杂以后操作慢，尤其是级联操作，因为它不是文件流操作过程，所以它会变化慢；gulp通过stream流的一个方式操作文件，使级联操作非常快，后来gulp就非常流行）
gulp的作用
--完成任务自动化，帮你工作流非常顺畅去做这件事；（背后是NodeJs去做开发的，提供了很多插件）
利用gulp的很多插件完成各项任务task，通过不同task的组合去完成各项复杂的东西，让开发过程中的一些操作都自动化处理；
了解如何使用gulp完成任务自动化
--看gulp中文文档；api简单，功能非常强大；
-学习gulp的方式：
==去gulp中文网了解基本的api和有哪些实用的插件，
通过实例做的项目构建中用到的大量的gulp脚本，学会如何用gulp解决ES6这个项目构建；
3.编译工具（babel、webpack）
任务自动化是做这个事的，任务自动化需要借助编译工具去完成每一步的操作；
比如：编译sass有sass做的编译工具；
编译ES6
（babel是专门编译ES+6代的，编译成ES5，让浏览器识别的一个功能；）
webpack
（处理模块化项目依赖的关系的；）
--比如文件b.js，b.js这个模块要依赖a.js这个模块，
ES6写法：
import a.js
编译b.js的时候会把a.js自动打印编译过来；
什么是babel、webpack
babel可以理解是javascript的编译器；ES6本身不能直接在浏览器上运行的，需要编译，要编译的工具就是babel；
（ 现在babel非常流行的，不管是用vue.js还是React.js背后只要用了ES6都是用babel做编译）；
webpack：解决模块化的一个工具
bable的核心用法
bable怎么用，怎么解决兼容性问题，怎么去做编译，和gulp结合应该引用哪些包，从而能完成一个ES6的编译；
了解webpack及webpack-stream的作用
webpack-stream是webpack对gulp的一个支持；（gulp是通过stream（二进制的流去操作的）的方式去做的），
webpack在gulp上是用webpack-stream去做的
4.代码实现
*创建一个ES6的前端工程
--完成目录结构、自动构建、服务器搭建
gulp --watch 构建命令
---项目怎么一步一步完成构建后续会专门弄出来写；
网友评论