phpstorm压缩JS

同样可以压缩css

1. 目录

• 需要的软件
• 配置
• 运行
• 常见错误

2. 需要的软件

• phpstorm 或者 webstorm
• java 环境
  • 下载地址
  • 记得设置环境变量-window的话会自动设置的
• yuicompressor-2.4.8.jar 其中一个版本即可
  • github地址

安装就自行解决咯

3. 配置

看到上面的 【external tool】和【file watchers】了吗？区别在于前者相当于一个快捷命令，点击才会去压缩；后者是监听项目每一个文件的变化，自动压缩。我们以前者为例进行配置！！后者读者可以自行配置

3.1 添加external Tool

• +按钮进行添加命令
  

其中红框3个是需要注意的参数配置。Program,Arguments,Working directory

• Program 是 安装java的时候的javaw的路径。比如 E:\Program Files\java\jre1.8\bin\javaw.exe, Mac的话直接使用java即可
• Arguments 就是运行这个javaw.exe程序的参数:
  • 这个需要填写刚才下载的 yuicompressor-2.4.8.jar 全路径，记得如果目录有空格就添加双引号 "yuicompressor-2.4.8.jar的 全路径"

    -jar
    "E:\Program Files\JetBrains\PhpStorm 2017.3.6\ext\yuicompressor-2.4.8.jar"
    $FileName$
    -o
    $FileNameWithoutExtension$.min.js

• Working directory 比如 ： $FileDir$ 表示当前文件的所在目录
  • 这个是运行命令的目录，记得这个是目录。

对于想要使用其他配置参数的可以直接使用搜索引擎。但是这里给一下常用的参数吧：

• $FileName$ 是指不带路径带有扩展名的文件名
• $FileNameWithoutExtension$ 不带路径也不带扩展名的文件名
• $FileDir$ 当前文件坐在目录
• $FileParentDir$ 当前文件上一级目录
• $SelectedText$ 当前选择的文本内容
• $ProjectFileDir$ 当前项目路径

然后配置这个命令的名称，描述即可，点击保存。

4. 运行

1. 菜单栏上有一个Tools -> External Tools -> 你刚才定义的名称
2. 或者在文件内部右键也可以看到
3. 如果没有报错就可以看到相应路径有一个压缩文件

5. 常见错误

可能会出现一个叫 invalid property id的错误信息。也会报告具体是哪一行的错误。

我遇到的代码错误是：第二行：invalid property id

$scope.isNew = {
    true:'isnew'
};

看了之后并没有一个叫id的属性，是真的错了吗？是的，错了，虽然实际运行起来没问题。

修改一下即可，原因是这个对象的键名不能为 布尔值，容易造成混淆

$scope.isNew = {
    1:'isnew'
};

比如还会造成一个错的是压缩CSS的时候：

.className{
    float: "left"
}

看上去没问题，但是仍然会出现上面的错误。因为float是JS上浮点数的关键字，这里容易造成混淆了，所以：

.className{
    "float": "left"
}

这样就好了

phpStorm该配置官方文档

本作品采用《CC 协议》，转载必须注明作者和本文链接