webstorm如何配置uglifyjs压缩js？

我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

uglifyjs的功能是非常强大的，在上一篇文章中，苏南大叔讲述利用uglifyjs合并js的命令方法。在本文中，苏南大叔继续叙述webstorm和uglifyjs的合体，单独压缩某个js。注意：没有合并js的功能，只是单独压缩某个js。其实，主体上来说，本文就是篇webstorm的设置参数的教程。jetbrains公司旗下系列IDE，比如phpstorm之类的都适用本篇文章。

添加js文件的file watcher

步骤如下，看图说话即可。

识别uglifyjs路径

如果webstorm没有正确识别出本机的uglifyjs，就会提示program not set。这个时候，就需要自行寻找开发机上的uglifyjs的路径。如何查找全局安装的uglifyjs的路径，请查看文末链接。

如果webstorm已经正确识别出本机的uglifyjs，这里可以直接填写uglifyjs，或者其真实路径。

配图是在window开发机上的全局安装的uglifyjs的路径查找效果图。

增加版设置file watcher的scope

node发展到今天，导致.js文件都开始有歧义。一般来说，苏南大叔可能希望传统意义上，用于浏览器的.js文件，才应用压缩功能。所以，这里需要对file watcher设置一个scope。仅仅监控某个目录下面的.js文件。

增加版设置.min.js文件路径

默认情况下，生成的.min.js文件和.js文件是在同一目录级别下的。苏南大叔希望.min.js文件都存在于dist/目录下面。所以修改设置如下：

arguments:

$FileName$ -o ../dist/$FileNameWithoutExtension$.min.js

output paths to refresh:

../dist/

效果如下图：

增强版之file watcher配置信息位置

相关配置信息，位于项目根目录下面的.idea/watcherTasks.xml文件之中。所以，如果有什么问题，直接来这里查找一下吧。

相关链接

• 《npm的.npmrc文件在哪里？缓存及全局包文件在什么位置？》

https://newsn.net/say/npm-whereis.html

• 《使用jetbrains公司的IDE，打开项目时无左侧导航的解决方案》

https://newsn.net/say/jetbrains-ide-nonav-solution.html

结论

经过本文这样设置后，目标文件夹src/下面的所有.js文件，一经修改，就会在dist/目录下面，生成一个同名的.min.js文件。有多少目标.js文件，就会有多少个同名的.min.js生成结果。

更多uglifyjs的相关经验文章，苏南大叔提示您：点击如下链接查看。

• https://newsn.net/tag/uglifyjs/ 。

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。