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

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

添加js文件的file watcher

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

webstrom如何配置uglifyjs压缩js - 000

webstrom如何配置uglifyjs压缩js - 001

webstrom如何配置uglifyjs压缩js - 002

识别uglifyjs路径

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

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

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

webstrom如何配置uglifyjs压缩js - 004

webstrom如何配置uglifyjs压缩js - 005

webstrom如何配置uglifyjs压缩js - 006

增加版设置file watcherscope

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

webstrom如何配置uglifyjs压缩js - 345

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

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

arguments:

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

output paths to refresh:

../dist/

效果如下图:

webstrom如何配置uglifyjs压缩js - 339

webstrom如何配置uglifyjs压缩js - 340

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

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

webstrom如何配置uglifyjs压缩js - 342

webstrom如何配置uglifyjs压缩js - 341

相关链接

  • 《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的相关经验文章,苏南大叔提示您:点击如下链接查看。

本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。