一、構(gòu)建環(huán)境
1.es6瀏覽器不支持，先要構(gòu)建支持es6的環(huán)境
項(xiàng)目構(gòu)建工具：
gulp:自動(dòng)化工具
? ? ? ? ? 中文網(wǎng)址：https://www.gulpjs.com.cn/
babel:編譯工具,編譯es6 ?
? ? ? ? ? 中文網(wǎng)址：https://www.babeljs.cn/
webpack:構(gòu)建工具
? ? ? ? ? ? ? 中文網(wǎng)址：https://www.webpackjs.com/
2.創(chuàng)建項(xiàng)目文件夾
APP：前端代碼（views ?css ?js）
Server：服務(wù)端文件
Tasks:構(gòu)建工具目錄
Views/index.ejs:模板文件，ejs后綴是因?yàn)檫@個(gè)文件通過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里執(zhí)行express ?-e ?.
Express： 腳手架
-e：使用ejs模板引擎
. :在當(dāng)前目錄執(zhí)行
執(zhí)行后的命令行：
根據(jù)命令行提示執(zhí)行：npm install ?
5. 初始化項(xiàng)目 npm init
? ? 回答問題之后生成對(duì)應(yīng)的package.json文件
6.創(chuàng)建gulp配置文件
執(zhí)行兩條命令：
touch gulpfile.babel.js ：創(chuàng)建gulp配置文件（和gulp官網(wǎng)建議文件名（gulpfile.js）不一樣，因?yàn)榇隧?xiàng)目使用es6語法創(chuàng)建娇唯，需要使用babel編譯，文件名固定）
touch .babelrc （文件名固定）：設(shè)置babel編譯工具的配置文件
7.配置babelrc
npm install babel-preset-env --save-dev
//此插件用于轉(zhuǎn)換es2015
babelrc文件內(nèi)：
{ "presets": ["env"]}
//需要兼容到IE8需要進(jìn)行其他配置
注意: 因?yàn)?npm 2.x 下載依賴的關(guān)系寂玲，在使用 npm 2.x 運(yùn)行 Babel 6.x 的項(xiàng)目時(shí)塔插，可能會(huì)引起性能問題。 你可以通過切換到 npm 3.x 或在 npm 2.x 上使用?dedupe?選項(xiàng)來解決這個(gè)問題拓哟。
8.配置gulpfile.babel.js
將tasks下面的包都引進(jìn)來執(zhí)行
二想许、構(gòu)建腳本（文件都放在tasks里面）
1.在tasks/util下創(chuàng)建args.js
引入args包定義參數(shù)（處理命令行參數(shù)）
注意輸出模塊：
2.tasks下創(chuàng)建scripts.js （js腳本構(gòu)建）
（1）寫好依賴項(xiàng)
?注：gulp-util是gulp 常用工具函數(shù)集合
gulp官方插件：https://gulpjs.com/plugins/
（2）下載依賴項(xiàng)
（3）構(gòu)建腳本
注：loader改為babel-loader
3.創(chuàng)建pages.js (模板頁面塊構(gòu)建腳本)
4.創(chuàng)建css.js（處理css構(gòu)建腳本）
5.創(chuàng)建server.js ( 服務(wù)器構(gòu)建腳本 )
三、讓任務(wù)自動(dòng)完成
要實(shí)現(xiàn)的目標(biāo)：讓原始文件自動(dòng)編譯到server執(zhí)行目錄中
（都放在tasks里面）
1.創(chuàng)建brower.js （瀏覽器監(jiān)聽相關(guān)文件）
2.創(chuàng)建clean.js （建立清空指定目錄文件的任務(wù)）
原因：在執(zhí)行上面的任務(wù)將es6轉(zhuǎn)換成es5或者es3時(shí)断序，會(huì)將源文件拷貝編譯再覆蓋到目錄文件中流纹，安全起見需要在每次覆蓋之前將原目錄清空
3.創(chuàng)建build.js (定制執(zhí)行順序規(guī)則)
目的：將所有的gulp任務(wù)關(guān)聯(lián)起來，定制執(zhí)行順序規(guī)則逢倍，server啟動(dòng)之前所有文件都應(yīng)該編譯完成
4.創(chuàng)建default.js
原因：命令行執(zhí)行g(shù)ulp時(shí)捧颅，后面不接任務(wù)名，就會(huì)默認(rèn)執(zhí)行default.js
這個(gè)任務(wù)必須要存在较雕。
5.補(bǔ)充構(gòu)建腳本需要的安裝包
npm install babel-polyfill babel-register connect-livereload del gulp-live-server gulp-sequence require-dir --save-dev
全部依賴包：
四、測(cè)試
執(zhí)行g(shù)ulp --watch 監(jiān)聽文件
在瀏覽器出入服務(wù)端口號(hào) localhost:3000,有效果證明成功
五挚币、熱更新
1.找到server下生成的app.js
找到這段代碼
在中間寫上
app.use(require('connect-livereload')());
注意安裝依賴包
2.測(cè)試：
編輯器代碼更改之后亮蒋，瀏覽器不需要刷新直接就可以自動(dòng)更新
最后：
注意：webpack新版本引用loader格式為
如果報(bào)錯(cuò)需要更改一下tasks/scripts.js文件
補(bǔ)充：指定下載插件某一版本
npm install webpack@1.15.0 --save-dev
