搭建一个交互型的前端构建环境（一）

现在的前端项目都是如此的复杂，以至于都需要依赖一些构建工具，主流的有webpack, gulp, grunt等。加上各种各样的配置文件就会形成了一个相对复杂的构建环境。一般的，我们可以把构建项目需要用到的参数写死在配置文件，但是，有些是需要动态配置的那怎么办呢？比方说，我们用express来启动本地服务器，这需要分配一个端口吧？写死一个端口如8080在配置文件是可以的，可是，如果端口被占用了那怎么办？难道要把占用我们端口的进程kill掉、或者修改配置文件，再重新run一次吗？如果把全部的参数都写死在配置文件里面，一旦启动了构建脚本，就如同脱僵之马，是不可控制的，会一直跑下去。那可以换个思路，能不能做一个交互式的脚本呢，就是启动了构建脚本之后，还允许我们插手去修改一些配置，比方说如果端口被占用了，可以在控制台输入一个新的端口，然后继续运行项目，是不是会更加友好一些？
前端构建环境一般都是基于Node脚本的，幸好社区上有了个叫做 inquire的第三方库，可以很方便的和控制台实现交互。至于这个库具体怎么用，这里就不说了，大家可以可以到官网看一下它的文档。另外，我们还需要提前检查端口是否被占用了，可以使用第三方库portscanner。下面就直接上一个demo哈，实现构建脚本在运行时分配服务器端口：

const inquirer = require('inquirer');
const portscanner = require('portscanner');

const questions = [];
questions.push({
  type: 'input',
  name: 'port',
  default: 3000, // 默认端口是3000
  message: `请输入调试端口号`,
  validate(input) {
    const port = Number(input);
    return new Promise((resolve, reject) => {
      if (isNaN(port)) {
        reject('端口号必须为数字');
      } else {

       // 检查端口是否被占用了，如果被占用则重新输入
        portscanner.checkPortStatus(
          port,
          '127.0.0.1',
          (error, status) => {
            if (error) {
              reject(error);
            } else if (status === 'open') {
              reject(`${port} 端口号已经被占用`);
            } else {
              resolve(true);
            }
          }
        );
      }
    });
  }
});

inquirer
.prompt(questions)
.then(answer => {
  console.log(answer);
}).catch(console.log);