如何在同一个browserify命令中压缩和因子捆绑文件？

Question

我目前使用的是 factor-bundle 命令来打包我的文件，并将所有公共部分合并到一个文件中：

browserify index.js bar-charts.js list-filter.js dashboard.js 
  -p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ] 
  -o ../../static/js/common.js

我之前也使用这个命令来压缩单个文件：

 browserify index.js | uglifyjs > ../../static/js/index.min.js

我怎样才能在同一个命令中使用factor-bundle组合文件并使用uglifyjs进行文件压缩?

我在factor-bundle的文档中找到了这个示例，但我不是很清楚如何调整它。

(如果有必要，我也可以使用两个命令。 我只是想最终获得压缩和组合的文件！)

- Richard

---

为什么不使用uglifyify？ - Jencel

Answer 1

我最近恰好在研究这个领域，而且偶然发现了可能能够帮到你的东西。

browserify files/*.js \
    -p [ ../ -o 'uglifyjs -cm | tee bundle/`basename $FILE` | gzip > bundle/`basename $FILE`.gz' ] \
    | uglifyjs -cm | tee bundle/common.js | gzip > bundle/common.js.gz

我对browserify并不是很熟悉，但在我看来，这似乎只是将factor-bundle的输出导入到uglify中。

来源：https://gist.github.com/substack/68f8d502be42d5cd4942

希望这能帮助到某些人。

- Alex Faunt

Answer 2

为了在单个命令中缩小和捆绑文件，您可以使用&&运算符从终端执行多个命令（即browserify、uglifyjs）的单行。

详细信息

要逐个缩小每个文件，我们可以链接多个uglifyjs命令到每个文件，但更简洁的方法是使用uglifyjs-folder模块，它允许将多个文件单独缩小成单个文件/文件夹（在您的情况下，一个文件夹）。这个模块的警告是我们无法重命名单个文件（例如将index.js重命名为index.min.js），因此，如果重命名文件是一个严格的要求，您可以继续使用uglifyjs并像上面提到的那样链接命令。

假设使用uglifyjs-folder，我已将被压缩文件的目标设置为一个生产就绪的文件夹./static/js/min/，通过包含-eo，其中e独立地对每个文件进行压缩，o指定了被压缩文件的目标文件夹（有关更多信息，请参见documentation）。

代码

方法1：终端命令

确保您的依赖项在系统上全局安装（例如npm i -g uglifyjs-folder）。终端命令如下：

browserify index.js bar-charts.js list-filter.js dashboard.js -p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ] -o ../../static/js/common.js && uglifyjs-folder ../../static/js -eo ../../static/js/min

方法二：NPM脚本

另外，假设您的项目正在使用npm（或yarn），您可以访问package.json并将您的browserify和uglifyjs命令重构为单独的npm脚本，并通过在项目的根目录（即package.json所在的位置）运行终端命令npm run build来同时执行它们。以下是npm脚本的定义：

"scripts": {
  "bundle": "browserify index.js bar-charts.js list-filter.js dashboard.js -p [ factor-bundle -o ../../static/js/index.js -o ../../static/js/bar-chart.js -o ../../static/js/list-filter.js -o ../../static/js/dashboard.js ] -o ../../static/js/common.js",
  "minify": "uglifyjs-folder ../../static/js -eo ../../static/js/min",
  "build": "npm run bundle && npm run minify"
}

希望这对你有所帮助！

- Ebod Shojaei