最简单搭建前端轻量级项目开发服务

　　本文讨论了如何搭建一个简单的前端项目开发服务，这个服务要实现以下几点：

1. Javascript的打包压缩；
2. scss的编译打包压缩；
3. 简单文件http服务；
4. 监测文件变化自动刷新浏览器；
5. 零配置（当然打包的入口文件不算在内），不需要本地安装node模块（全局安装即可）。

　　要实现这个目标，必须请出四剑客，当然，这些功能都是这些软件实现的：

• esbuild，实现js的快速打包
• sass，实现sass的编译打包
• browser-sync，实现http服务，监测文件变化刷新浏览器
• concurrently，集成上面三位，使得我们可以启动一个服务程序，而不是三个！

　　首先，全局安装四剑客：

npm install -g esbuild 
npm install -g sass
npm install -g browser-sync
npm install -g concurrently

　　安装完成后，你可以查看一下各位的软件版本号，验证是否成功安装了。

esbuild --version

 

　　其次，创建接口文件，app.js, app.scss。

# app.js
//
import("./scripts/xxx");
......
import("./scripts/main");

@import './styles/xxx.scss';
......
@import './styles/main.scss';

　　最后，终于，可以编写我们的服务脚本了：

concurrently "esbuild ./src/app.js --outfile=./public/app/app.min.js  --bundle --minify --sourcemap --watch" \
  "sass --watch --style=compressed  ./src/app.scss:./public/app/app.min.css" \
  "browser-sync start --s --port 8000 --listen 0.0.0.0 --no-ui --no-open --files **/*.html  --files public/app/*"

各项参数，这里就不在赘述了，如有需要，请大家自己去查看文档。

启动这个脚本，可以愉快地开发调试了。