SublimeText3で.pugと.scssをビルド

gulpやらnpm-scriptsやらを使っていたけど、そもそも私は普段、PugをHTMLに変換、SCSSをCSSに変換くらいしかしない。使ってて良かったー！と思うのは、Hugoから出力されたHTMLのコードを整形をする時。複数のファイルをコマンドぽちーで一気にやってくれるのは本当助かる。それ以外で複数のファイルに一気に何かするってことはそうそうないので、いちいち面倒臭いなーと。

前の記事の問題でググっている最中、AtomやVimでコンパイル云々の文字が目に入り、そういえばSublimeText3のパッケージにもコンパイルするやつあったような…と思って探してみるとやっぱりあった。そうだよねそうだよね、ただ書いてコンパイルするためだけに毎回黒画面立ち上げるってやっぱり非効率だったよね。すぐに導入しました。

1. 必要なPackageのインストール

SublimeText3にPackageControlから下記の3つを入れる。

2. Pugの設定

基本設定 > PackageSettings > SublimeOnSaveBuild > Settings-User を開き、pugを追記し、cssとjsは特にビルドすることないので消しておく。

{
    "filename_filter": "\\.(sass|less|scss|pug)$",
    "build_on_save": 1
}

適当な.pugファイルを開き、ツール > ビルドシステム > Pug を選択。何か書いて保存して、同じ場所に.htmlが出てくれば完了。

3. SCSSの設定

ツール > ビルドシステム > ビルドシステム追加を開き、SASS.sublime-buildというファイル名で下記を保存。

{

	"cmd": ["sass", "--update", "$file:${file_path}/${file_base_name}.css", "--stop-on-error", "--no-cache", "--sourcemap=none"],
	"selector": "source.sass, source.scss",
	"line_regex": "Line ([0-9]+):",

	"osx":
	{
		"path": "/usr/local/bin:$PATH"
	},

	"windows":
	{
		"shell": "true"
	}

}

適当な.scssファイルを開き、ツール > ビルドシステム > SASS を選択。何か書いて保存して、同じ場所に.cssが出てくれば完了。