如何在同一个 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

缩小文件？

我在因子包文档中找到了这个示例，但我真的不明白如何调整它。

（如果效果更好的话，我也可以使用两个命令。我只想得到缩小和组合的文件！）

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

希望这对某人有帮助

Answer 2

为了在单个命令中缩小和捆绑文件，您可以使用

&&

运算符在终端的一行中执行多个命令（即

browserify

、

uglifyjs

）。

详情

要单独缩小每个文件，我们可以为每个文件链接多个

uglifyjs

命令，但更简洁的方法是使用

uglifyjs-folder

模块，该模块允许将多个文件单独缩小到单个文件/文件夹中（在您的情况下） ， 一个文件夹）。该模块需要注意的是，我们无法重命名单个文件（例如，将

index.js

更改为

index.min.js

），因此如果严格要求重命名文件，您可以继续使用 uglifyjs 并像上面提到的那样链接命令。

假设使用

uglifyjs-folder

，我已通过包含

./static/js/min/

将缩小文件的目标设置为生产就绪文件夹

-eo

，其中

e

独立缩小每个文件，

o

指定目标文件夹缩小的文件（有关更多信息，请参阅文档）。

代码

方法一：终端命令

确保您的依赖项已全局安装在您的系统上（例如，

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

方法2：NPM脚本

或者，假设您的项目正在使用 npm（或yarn），您可以访问

package.json

并将

browserify

和

uglifyjs

命令重构为单独的 npm 脚本，然后通过运行终端命令

npm run build

来一起执行它们项目的根目录（即

package.json

所在的位置）。 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"
}

希望这有帮助！