在mac os webstorm中配置pug、sass和babel的file watcher

pug

1.下载全局安装pug

2.配置watcher

program，默认为/usr/local/bin/pug

arguments， $FileName$ -o $FileParentDir$[your path]

scss

1.下载安装ruby

2.下载sass

3.配置watcher

program，默认为/usr/local/bin/sass

arguments，--no-cache --update $FileName$:$FileParentDir$[your path]$FileNameWithoutExtension$.css 

babel

1.下载安装babel、babel-present-es2015、babel-plugin-transform-es2015-arrow-functions

2.配置.babelrc文件

{
  "plugins": [
    "transform-es2015-arrow-functions"
  ],
  "presets": [
    "es2015"
  ]
}

3.配置js文件的scope，在appearance & behavior -> scopes中，添加一个scope，选择js的文件目录，为这个scope命名

4.配置watcher 

scope，选择step3中建立的scope

program，默认为/usr/local/bin/babel

arguments，$FilePathRelativeToProjectRoot$ --out-file [your path]$FileNameWithoutExtension$.js --presets=es2015