快速搭建koa2开发环境：koa-generator + sass

如果你想快速开始一个项目，请使用脚手架。

vue有vue-cli，react有create-react-app，而koa也有属于自己的脚手架：koa-generator
另外，习惯了使用css的预编译程序，这里加入sass作为项目起步。

搞起！

1.全局安装koa-generator

npm install -g koa-generator

2.创建项目

koa2 -e koa2-demo

这里的 -e 参数是选择ejs作为模板引擎，如果不加这个参数会默认 jade 模板，至于jade模板对原html结构的破坏性就不展开讨论了，萝卜白菜各有所爱，我倾向于ejs。

3.安装依赖

cd koa2-demo
npm install

4.全局安装sass和nodemon

npm install -g sass nodemon

koa脚手架是把nodemon安装在本地，这里推荐改成全局安装，以便跟sass监听任务一起执行。

5.安装concurrently运行多个任务

既想跑nodemon监听后端文件变化，又想跑sass监听scss文件的变化，怎么办呢？
首先想到的是在两个命令里加上“&”符号运行两个命令，亲测不行。
这时候就可以借助concurrently来实现。
先全局安装：

npm i concurrently -g

ps：实测国内网络对此库不太友好，可以考虑科学上网或者换国内的cnpm镜像。

6.目录结构

我们在public目录下，新建一个scss来装.scss文件，喜欢sass语法的也可以用sass，本人还是喜欢保留花括号。

7.修改启动命令

在根目录package.json里，找到“scripts”，修改dev命令

"dev": "concurrently \"nodemon bin/www\" \"sass --watch public/scss:public/stylesheets\""

由于sass的编译只要在开发阶段运行，所以我写在了dev里
concurrently命令的语法结构是：concurrently “命令1” “命令2” …
第二条命令的解释：
sass --watch用以监听第一个目"public/scss"里的文件变化，然后编译到第二个目录"public/stylesheets"，两个目录间用冒号分割。

8.运行测试环境

npm run dev

从控制台里可以看出，concurrently为我们运行了两个任务：

• nodemon bin/www
• sass --watch public/scss:public/stylesheets

并且生成了[0]和[1]两个线程去监听和输出log，实在是友好。

接下来便可愉快地进行开发了。