我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

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

添加js文件的file watcher

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

苏南大叔:webstorm如何配置uglifyjs压缩js? - 000
webstorm如何配置uglifyjs压缩js?(图11-1)

苏南大叔:webstorm如何配置uglifyjs压缩js? - 001
webstorm如何配置uglifyjs压缩js?(图11-2)

苏南大叔:webstorm如何配置uglifyjs压缩js? - 002
webstorm如何配置uglifyjs压缩js?(图11-3)

识别uglifyjs路径

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

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

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

苏南大叔:webstorm如何配置uglifyjs压缩js? - 004
webstorm如何配置uglifyjs压缩js?(图11-4)

苏南大叔:webstorm如何配置uglifyjs压缩js? - 005
webstorm如何配置uglifyjs压缩js?(图11-5)

苏南大叔:webstorm如何配置uglifyjs压缩js? - 006
webstorm如何配置uglifyjs压缩js?(图11-6)

增加版设置file watcherscope

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

苏南大叔:webstorm如何配置uglifyjs压缩js? - 345
webstorm如何配置uglifyjs压缩js?(图11-7)

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

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

arguments:

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

output paths to refresh:

../dist/

效果如下图:

苏南大叔:webstorm如何配置uglifyjs压缩js? - 339
webstorm如何配置uglifyjs压缩js?(图11-8)

苏南大叔:webstorm如何配置uglifyjs压缩js? - 340
webstorm如何配置uglifyjs压缩js?(图11-9)

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

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

苏南大叔:webstorm如何配置uglifyjs压缩js? - 342
webstorm如何配置uglifyjs压缩js?(图11-10)

苏南大叔:webstorm如何配置uglifyjs压缩js? - 341
webstorm如何配置uglifyjs压缩js?(图11-11)

相关链接

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   webstorm    uglifyjs