Intellij IDEA & Sass 使用记录汇总

一、如何查看某端口被占用进程并将其杀死

• 终端输入以下命令，将会出现占用端口的进程信息：

lsof -i tcp:[port]    // port 为所占用的端口，如：8086

• 找到进程的 PID，使用 kill 命令杀死对应进程：

kill [PID]    // pid 

二、修改配置刷新页面即查看修改内容

Java Web 项目，如果修改了 jsp 、js、css 等文件内容想立即刷新页面查看，可修改服务器配置为如下所示：

三、用 Gradle 构建后要重新部署服务器

有时用 SVN 更新了很多内容时，需要用 Gradle 重新构建。当用 Gradle 构建完之后就要重新部署服务器（Q：如果频繁更新，这种操作会很麻烦，IDEA 能否自动完成？）：

四、解决 SVN 更新问题

不知道是否因为直接将文件放在 IDEA 的工作目录下，而非从远处 Checkout，更新 SVN 起来出现了些问题，例如：

• 显示版本 too old 于是去给 Mac 安装了最新版本的 SVN 客户端。但问题来了，Q：软件安装了，.bash_profile 文件也添加 export 重新生成了，但关闭终端，重启终端还是变回 1.7 版本？

不过后来折腾了下 IDEA 的 Subversion 配置不知道为什么就搞掂了~囧

五、File Watchers 与 Sass 实时编译

由于要用到 Sass 和 Compass 编译生成 CSS 代码 ，所以 File Watchers 是个非装不可的插件。

在 IDEA 安装插件很容易，在 Preferences 通用设置窗口里面，选择 Plugins 节点，输入搜索相关插件名称即可。

搜索安装完 File Watcher 之后，你会发现在 Tools 节点下出现了 File Watchers，点击下面的 + 新增一个配置（这里我已经创建了一个 Compass SCSS 设定）。

创建一个配置也很简单，基本上修改一个路径即可，就是下面用红色框圈住的地方，这个路径为项目存放 config.rb 文件的地方！（之前在这里也是折腾了一些时间才弄明白-。-）

这样就完成了！File Watchers 其实就是相当于一个文件监听器，当你在 IDEA 上编辑 .scss 文件时，会监听文件内容变化并调用系统安装的 Compas 来实时编译成 .css 文件，连保存都不用！

参考链接

• How to create file watchers transpiler configurations

• IntelliJ IDEA 2016.3 Help :: Working with Sass and SCSS in Compass Projects

六、解决 IDEA 的卡顿问题

我安装的是 15 版的 IDEA，作为低配版的 8g 内存的 15 年 rMBP，也是会出现卡顿现象，又经过一番折腾，发现把 Inspections 都 empty 之后流畅了不止一点半点！其它优化设置可以看下面的链接。

参考链接

• 彻底解决 Intellij IDEA 卡顿

七、解决 Compass Sass 中文注释错误问题

问题描述：

• 控制台报错，类似于Syntax error: Invaild GBK charater 报错。；

• 排查发现是由于中文注释引起。

解决方法：

• 在 Compass 项目配置文件 config.rb 添加一行代码（也可以找到 Ruby 的安装目录，找到里面的 Sass 模块的 engine.rb）：

// 放在所有的 require XXX 之后即可
Encoding.default_external = Encoding.find('utf-8')

• 最后在 .scss 文件头部启用编码声明即可：

@charset "utf-8";