简介
build-output-script 是一款用于前端自动化构建和输出最终文件的工具，支持多个源目录和输出目录，可以自由配置各种类型的文件的处理方式，例如压缩、合并、加前缀等。本文将详细说明如何使用该工具完成前端项目的构建输出。
安装
使用 npm 包管理器安装 build-output-script：
npm install build-output-script --save-dev
同时建议安装一个简单的命令行工具 npx，用于快速运行本地安装的 npm 包命令：
npm install npx -g
使用方法
首先需要在项目根目录下创建一个名为 build-output-config.json 的配置文件，以 JSON 格式描述项目构建输出的细节，包括源目录、输出目录、文件类型等。该文件中可以包含多个源目录和多个输出目录，每个目录可以有自己的处理方式和输出规则。下面是一个简单的示例：
-- -------------------- ---- -------
-
---------- -
-
------- -----------
---------- -----------
--------- -------------
-
-
-其中，sources 是一个数组，每个元素代表一个源目录的配置。path 表示该源目录的路径，process 是一个数组，代表在输出前需要对该目录下的文件进行的处理方式，可选值包括 uglify（压缩 JavaScript）、minify（压缩 CSS）等。output 表示此源目录输出的路径，该路径可以是相对路径或绝对路径。
完成配置文件后，在命令行中运行：
npx build-output
即可执行构建输出的命令。该命令将根据 build-output-config.json 配置文件中的内容，对所有源文件进行处理和输出。
指导意义
build-output-script 工具可以极大地减少前端开发人员在构建和输出项目时的工作量和时间成本，并且可以提高构建输出的效率和稳定性。对于新手开发者，该工具也可用于学习和实践常用的前端构建方法和工具，并且可以根据自身需求进行定制化配置，进一步提高前端项目的质量和可维护性。
示例代码
以下是一些常用配置的示例代码：
-- -------------------- ---- -------
-
---------- -
-
------- -----------
---------- ---------- ---------
--------- -------------
--
-
------- ------------
---------- ---------- ----------------
--------- --------------
--
-
------- ------------
---------- -------------
--------- --------------
-
-
-其中，babel 可以将 ES6 代码转换成 ES5 代码，autoprefixer 可以在生成的 CSS 代码中自动添加浏览器兼容前缀，imagemin 可以压缩图片文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f9d9381d61a3540f9f