简介
Broccoli 是一个快速、灵活和易于扩展的前端构建工具。然而，Broccoli 并没有自带所有的必要的处理器以及操作系统上的 shell 命令。为了更方便地使用这些工具，我们可以使用 npm 包 broccoli-shell。
broccoli-shell 是一个用于将 shell 命令应用于 Broccoli 生成的树的插件。使用 broccoli-shell，我们可以轻松地运行各种 shell 命令，例如用 uglify 压缩 JavaScript 文件，用 sass 编译 CSS 文件等。此外，broccoli-shell 还可以在构建时运行一些可执行文件，如 PhantomJS，从而对生成的树进行更细粒度的操作。
安装
可以通过以下命令进行安装：
npm install --save-dev broccoli-shell
这会将 broccoli-shell 安装到项目的开发依赖中。
使用
基本用法
使用 broccoli-shell 的基本用法与 Broccoli 的其他插件相似。我们需要在 Brocfile.js 中导入 broccoli-shell 并将其传递给 broccoli.makeTree 方法。以下是一个简单的示例：
// Brocfile.js
const shell = require('broccoli-shell');
const tree = 'src';
const command = 'cp -R data dist/';
module.exports = shell(tree, command);在上面的例子中，我们使用了 cp 命令来将 data 目录复制到 dist 目录中。要注意的是，command 参数的值应该是一个字符串，其中包含要运行的完整 shell 命令。
配置选项
broccoli-shell 还提供了一些可选的配置选项，以便更好地控制插件的行为。以下是插件的完整配置选项：
-- -------------------- ---- ------- - ----- --- -- --- ----- ----- ---- ---- -- -- ----- ---------- ---- --- -- -------- --- ------ ----- -- ------------ ---------- ----- -- ---------------------- ---- ----- -- --- ----- -- ----------- ----- -- --------- ----- ----- -- ---- ------- ----------------- ------ -- --------------------- ------------------------- ------- -- ----------- ------- ----- -- --------- ------- ----- -- --------- -
下面我们将详细说明这些选项。
args
该选项是一个数组，其中包含要传递给 shell 命令的参数。例如，如果要使用 uglify 压缩 JavaScript 文件，则可以传递以下参数：
['-c', '-m', '-- comments false']
cwd
该选项表示 shell 命令执行时的工作目录。默认值为 '.'，表示使用当前目录。
env
该选项可以通过 process.env 来传递给脚本的环境变量。例如，您可以设置以下环境变量：
{
PATH: [...],
NODE_ENV: 'production',
MY_VAR: 'foo',
}stdin
该选项默认为 null，表示 shell 命令不需要从标准输入中读取数据。如果您需要将一个字符串写入标准输入，那么您可以设置：
'echo "Hello, world!"', stdin: 'Hello, world!',
uniqueKey
该选项是一个为命令提供唯一标识的字符串，类似于缓存键。如果您在多次运行相同的命令后想使用缓存，请设置该选项。例如：
uniqueKey: 'uglify-js-args'
cmd
该选项是一个完整的 shell 命令字符串。如果您使用该选项，则忽略 command 选项。例如：
cmd: 'uglifyjs -mc -c -o dist/main.min.js src/main.js'
outputFile
该选项可以将操作的内容写入到目标文件中（而不是在内存中返回）。例如，以下代码将通过 cat 命令将 'src/file.txt' 的输入显示在终端上，并将输出写入到 'out.txt' 文件中：
const tree = 'src';
const command = 'cat file.txt'; // 显示文件内容到标准输出
const outputFile = 'out.txt'; // 在磁盘上保存文件内容
module.exports = shell(tree, command, {
outputFile,
});then
该选项是一个可选的函数，它可以返回一个 promise。如果指定该选项，则会在 shell 命令执行完毕后调用该函数，以处理所有结果。该函数必须返回一个 promise。
例如，以下代码使用 curl 下载文件，然后使用 tinypng 压缩该文件：
const tree = '.';
const downloadCommand = 'curl -o image.png [IMAGE_URL]';
const optimizeCommand = 'tinypng image.png';
module.exports = shell(tree, downloadCommand, {
then: outputFile => {
return shell('.', optimizeCommand, { args: ['-f', outputFile] });
},
});persistentOutput
该选项可以防止在内存中保留所有命令输出，并将命令输出写入指定的目标文件。如果启用了该选项，则不应在 Broccoli 构建目录中返回任何文件。
const tree = 'src';
// 命令输出写入到 dist.log 文件中
const command = 'echo "hello" > dist.log';
module.exports = shell(tree, command, { persistentOutput: true });上面的例子将命令输出写入了 dist.log 文件中，而不是在内存中保留该输出。该文件将不会出现在 Broccoli 构建的 dist 目录中。
persistentOutputEncoding
该选项表示将命令输出写入文件时使用的编码格式。默认值为 'utf8'。
stdout, stderr
这两个选项控制是否在控制台上显示 shell 命令的标准输出和标准错误输出。默认情况下，这两个选项都为 true。
结论
通过 broccoli-shell，我们可以在前端构建过程中更轻松地使用 shell 命令。我们可以执行任何操作系统支持的命令，并获得更好的灵活性和性能。在您的下一个前端项目中，试试使用 broccoli-shell 来了解其方便和强大的功能！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde5119