① - ES6 项目创建

• 任务自动化gulp

  • 什么是任务自动化
  • 什么是gulp
  • gulp的作用
  • 了解如何使用gulp完成任务自动化
    参考:http://www.jianshu.com/p/d003e12e2f55

• 编译工具 (babel 、webpack)

  • 什么是babel、webpack
  • babel的核心用法
  • 了解webpack及webpack-stream的作用

• 代码实现

  • 创建一个ES6前端工程
  • 完成目录结构、自动构建、服务器搭建

项目目录创建

• 命令行

创建更目录 `mkdir es6`   es6为根目录的名称
~$ mkdir es6
进到目录里面
~$ cd es6/
创建放置前端代码的目录app
~/es6$ mkdir app
创建服务器目录
~/es6$ mkdir server 
创建构建工具目录
~/es6$ mkdir tasks

• 在app目录中分别创建css js views目录

进到app目录下
~/es6$ cd app/
创建css目录
~/es6/app$ mkdir css
创建js目录
~/es6/app$ mkdir js
创建views目录
~/es6/app$ mkdir views

• 初始化文件

在js文件中创建class目录
~/es6/app$ mkdir js/class
在class目录中初始化test.js文件
~/es6/app$ touch js/class/test.js
再初始化入口文件
~/es6/app$ touch js/index.js
初始化两个模板文件
错误模板
~/es6/app$ touch views/error.ejs
入口模板
~/es6/app$ touch views/index.ejs

• 回退到server目录

回退到server目录
~/es6/app$ cd ../server/
使用express脚手架 -e:表示我要使用ejs模板引擎  " . "表示在当前目录执行
~/es6/server$ express -e .   //回车
回车之后会出现一大堆文件, 表管他, 继续执行npm install
~/es6/server$ npm install

• 回到构建目录

回到构建目录
~/es6/server$ cd ../tasks/
创建util目录,放置常见脚本
~/es6/tasks$ mkdir util
初始化文件
~/es6/tasks$ touch util/args.js

• 回到根目录

回到根目录
~/es6/tasks$ cd ../
查看根目录已经创建好的文件
~/es6$ ls
会发现已经创建好了以下文件
app   server  tasks

• 初始化创建package.json文件

~/es6$ npm init
接下来出现name、version、description 等 可以写(也可以不写,可以到配置文件里面去改)
如果不写的话,直接按 enter 回车
最后会出现
Is this ok? (yes)
直接输入 y 回车
查看目录下文件
~/es6$ ls
app     package.json  server      tasks
我们发现上面的package.json已经创建好了

• 创建设置babel编译工具的配置文件

创建设置babel编译工具的配置文件
~/es6$ touch .babelrc
创建gulp配置文件
~/es6$ touch gulpfile.babel.js

现在目录结构以及简单的初始化文件都已经做完了,
接下来就可以写代码了!