一、构建环境
1.es6浏览器不支持，先要构建支持es6的环境
项目构建工具：
gulp:自动化工具
中文网址：https://www.gulpjs.com.cn/
babel:编译工具,编译es6
webpack:构建工具
中文网址：https://www.webpackjs.com/
2.创建项目文件夹
APP：前端代码（views css js）
Server：服务端文件
Tasks:构建工具目录
Views/index.ejs:模板文件，ejs后缀是因为这个文件通过nodejs的express框架做的，他的模板引擎就是 ejs模板引擎
Tasks/Util：放置常见脚本
3.安装
npm install nodejs -g 链接：http://nodejs.cn/
npm install express -g 链接：http://www.expressjs.com.cn/
npm install -g express-generator
4.在server里执行express -e .
Express： 脚手架
-e：使用ejs模板引擎
. :在当前目录执行
执行后的命令行：
根据命令行提示执行：npm install
5. 初始化项目 npm init
回答问题之后生成对应的package.json文件
6.创建gulp配置文件
执行两条命令：
touch gulpfile.babel.js ：创建gulp配置文件（和gulp官网建议文件名（gulpfile.js）不一样，因为此项目使用es6语法创建，需要使用babel编译，文件名固定）
touch .babelrc （文件名固定）：设置babel编译工具的配置文件
7.配置babelrc
npm install babel-preset-env --save-dev
//此插件用于转换es2015
babelrc文件内：
{ "presets": ["env"]}
//需要兼容到IE8需要进行其他配置
注意: 因为 npm 2.x 下载依赖的关系，在使用 npm 2.x 运行 Babel 6.x 的项目时，可能会引起性能问题。 你可以通过切换到 npm 3.x 或在 npm 2.x 上使用 dedupe 选项来解决这个问题。
8.配置gulpfile.babel.js
将tasks下面的包都引进来执行
二、构建脚本（文件都放在tasks里面）
1.在tasks/util下创建args.js
引入args包定义参数（处理命令行参数）
注意输出模块：
2.tasks下创建scripts.js （js脚本构建）
（1）写好依赖项
注：gulp-util是gulp 常用工具函数集合
gulp官方插件：https://gulpjs.com/plugins/
（2）下载依赖项
（3）构建脚本
注：loader改为babel-loader
3.创建pages.js (模板页面块构建脚本)
4.创建css.js（处理css构建脚本）
5.创建server.js ( 服务器构建脚本 )
三、让任务自动完成
要实现的目标：让原始文件自动编译到server执行目录中
（都放在tasks里面）
1.创建brower.js （浏览器监听相关文件）
2.创建clean.js （建立清空指定目录文件的任务）
原因：在执行上面的任务将es6转换成es5或者es3时，会将源文件拷贝编译再覆盖到目录文件中，安全起见需要在每次覆盖之前将原目录清空
3.创建build.js (定制执行顺序规则)
目的：将所有的gulp任务关联起来，定制执行顺序规则，server启动之前所有文件都应该编译完成
4.创建default.js
原因：命令行执行gulp时，后面不接任务名，就会默认执行default.js
这个任务必须要存在。
5.补充构建脚本需要的安装包
npm install babel-polyfill babel-register connect-livereload del gulp-live-server gulp-sequence require-dir --save-dev
全部依赖包：
四、测试
执行gulp --watch 监听文件
在浏览器出入服务端口号 localhost:3000,有效果证明成功
五、热更新
1.找到server下生成的app.js
找到这段代码
在中间写上
app.use(require('connect-livereload')());
注意安装依赖包
2.测试：
编辑器代码更改之后，浏览器不需要刷新直接就可以自动更新
最后：
注意：webpack新版本引用loader格式为
如果报错需要更改一下tasks/scripts.js文件
补充：指定下载插件某一版本
npm install webpack@1.15.0 --save-dev
