-
任务自动化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目录中分别创建
cssjsviews目录
进到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
现在目录结构以及简单的初始化文件都已经做完了,
接下来就可以写代码了!
