搭建es6热更新环境 2018-07-31

一、构建环境

1.es6浏览器不支持，先要构建支持es6的环境

项目构建工具：

gulp:自动化工具

          中文网址：https://www.gulpjs.com.cn/

babel:编译工具,编译es6  

          中文网址：https://www.babeljs.cn/

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 [email protected] --save-dev