如何在同一个browserify命令中对文件进行最小化和因子绑定

How to minify and factor-bundle files in the same browserify command?

本文关键字：最小化 绑定 文件 同一个 browserify 命令      更新时间：2023-09-26

我目前有这个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文档中找到了这个例子，但我真的不知道如何修改它。

(如果效果更好的话，我也可以使用两个命令。我只是想以缩小和合并的文件结束!)

我最近碰巧一直在研究这个领域，偶然发现了我认为可能能帮助你的东西。

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

希望对大家有所帮助

为了在单个命令中缩小和捆绑文件，您可以使用&&操作符在终端的一行中执行多个命令(即browserify, uglifyjs)。

详细信息

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

假设使用了uglifyjs-folder，我通过包含-eo将最小化文件的目标设置为生产就绪文件夹./static/js/min/，其中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
方法二: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"
}

希望这对你有帮助!

相关文章：