快速搭建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,实在是友好。

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

相关文章

学习编程是顺着互联网的发展潮流,是一件好事。新手如何学习...
IT行业是什么工作做什么?IT行业的工作有:产品策划类、页面...
女生学Java好就业吗?女生适合学Java编程吗?目前有不少女生...
Can’t connect to local MySQL server through socket \'/v...
oracle基本命令 一、登录操作 1.管理员登录 # 管理员登录 ...
一、背景 因为项目中需要通北京网络,所以需要连vpn,但是服...