Atom: Pugファイル保存時コマンドを走らせる

Atom エディタで Pug ファイル保存時コマンドを走らせる

Atom エディタはプラグインが多くて使いやすいんですが、特定の目的でネットを検索しても見つからない項目ってのがどうしてもあります。

ここでは PUG ファイルを編集・保存後 HTML ファイルを自動更新する方法を説明します。それらしいタイトルが検索して出てこなかったのでタイトルでキーワード載せてみました。

HTMLを構造化して読みやすくしてくれる Pug は使いやすいです。そのままだと Pug ファイル形式はフォーマットできません。領域を設定してコメントアウトできないんですね。Atom で使うならプラグイン language-pug などあります。これを使うとコメントアウトできます。

save-commands をインストール

ファイル保存時コマンドを走らせるプラグインはさまざまありますが、save-commands が便利です。

毎回毎回コマンドを走らせるってのはうざいですからぜひ自動化しましょう。

設定ファイルを書く

Pug のコンパイルのコマンドの一例です。ファイルを指定し、--out オプションで作成した HTML ファイルを保存先を指定します。--pretty オプションで出力ファイルの形式を指定できます。

pug <source file> --pretty --out <dest>

このようなコマンドを走らせたい場合、save-commands.jsonファイルを作成し、コマンドを記述します。拡張子.pug を持つファイルを保存時コマンドを走らせたい場合、ワイルドカードでファイルを指定し、コマンドを記述します。

{
    "commands": [
        "templates/pug/*.pug: pug {relPath}page.pug --pretty --out templates"
    ]
}

詳しくは本家サイトで。

{
    "commands": [
        "*.coffee : coffee -c {relFullPath}",
        "src/**/*.coffee : coffee -c -o dist{relPathNoRoot} {relFullPath}",
        "src/**/client/**/*.coffee : gulp browserify",
        "src/client/**/*.jade   : jade -P {relPath}{filename} -o dist{relPathNoRoot}",
        "src/client/**/*.jade   : gulp createTemplateCache",
        "src/server/**/*.jade : copy {relPath}{filename} dist{relPathNoRoot}",
        "src/**/*.styl   : gulp compileStylus",
        "src/**/*-spec.coffee : mocha src{relPathNoRoot}{name}.coffee --compilers coffee:coffee-script/register",
        "src/**/*.coffee : gulp runSpec --file=src{relPathNoRoot}{name}-spec.coffee --require coffee-script/register --compilers coffee:coffee-script/register"
    ]
}