改用 WebStorm 编译 es6 与 scss 文件

在新的项目里，我已经开始全面使用 Babel 与 SASS 了。本来 WebStorm 里自带 File Watcher 功能，但我认为项目本身应该尽可能的脱离编辑器环境，这样每个人都可以使用通用的方法进行开发，所以自己写了一个 gulp 任务：lmk123/gulp-es6-sass。

然而，我现在决定使用 WebStorm 里的 File Watcher 了，原因如下：

• 每次开始开发之前，都要启动一个 gulp watcher 任务太繁琐了
• 编译之后的文件不能立刻同步进 WebStorm，这导致刷新网页后，加载的仍然是旧文件
• 将编译步骤加入 gulp 流程会使得 gulpfile.js 变得杂乱无章，不利于维护
• WebStorm 的 File Watcher 配置起来实在是太容易了

不得不说，用 WebStorm 编程真是一种享受，项目的单元测试也能使用 WebStorm 执行。也许以后我会越来越依赖 WebStorm 了。

附上使用 WebStorm 编译 es6 与 scss 的教程：

http://blog.jetbrains.com/webstorm/2015/05/ecmascript-6-in-webstorm-transpiling/ https://www.jetbrains.com/webstorm/help/transpiling-sass-less-and-scss-to-css.html

其中 scss 要用 gem 安装，遇到安装错误可以参考此链接。

简单记录一下解决过程：

gem sources -r https://rubygems.org/
gem sources -a https://ruby.taobao.org/

gem install sass

不过 File Watcher 只在文件改变的时候触发，但也可以用这种方式手动触发：

1. 选中你要执行 File Watcher 的文件/文件夹（一般是项目根目录）
2. 选择 Help | Find Action
3. 在搜索框中输入 run file w，此时出来的第一个选项就是 Run File Watcher
4. 点击它，WebStorm 就会对你选中的文件/文件夹执行这些 watchers

你也可以给这个动作分配一个自定义的快捷键，见这里。

新建 Watcher 的时候，WebStrom 的默认设置就已经能运行了，但还是推荐将 Show Console 设为 Never，否则每次编辑文件到一半就会弹出一个语法错误的消息。

WebStorm 默认的 Scss File Watcher 配置需要改进一下：

• 默认的配置不会将生成的 source map 与对应的 .scss 文件归为一组，需要在 Output paths to refresh 选项后面加上一段 :$FileNameWithoutExtension$.css.map，变成 $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
• Windows 用户使用的时候，若文件里包含中文则会遇到 Invalid GBK character "\xE8" on line 1 的错误，解决方法是在每个文件第一行加上 @charset "utf-8";
• 去掉Track only root files的勾，否则编辑以下划线开头的.scss文件时，引用了这个文件的那些文件不会被重新编译。