例えば、Sassもしくはcompassだけを利用してHTMLとCSSを構築することはあまりありません。純粋なCSSの改修だけならそれもあるかもしれませんが、基本的にはPugとSassやPugとcompassを両方使うことになります。
しかし、それぞれにCLI（コマンドラインインターフェース）が存在するため、SassでWatchしているときはPugのコンパイルができません。逆もしかりです。
しかし、HTMLとCSSは同時に構築しながら確認していくものです。
そこで、タスクランナーやビルドシステムという仕組みが存在します。

今回はタスクランナーのGlup導入を紹介します。
Javascriptベースのタスクランナーで、プラグインによってタスク処理を管理できる仕組となっています。

Gulpのインストール

Javascriptベースなので、やはりNode.jsは必須です。（まだの方は先にNode.jsをインストールしてください）
Gulpをどこからでも利用できるようにインストールします。

nmp install -g gulp-cli

次に実際のプロジェクトフォルダに移動し、そのフォルダでGulpを利用できるようにします。
cdコマンドで移動し、プロジェクトフォルダ直下で以下のコマンドを入力します。

npm init -y

これでプロジェクトフォルダにpackage.jsonというファイルができます。

Gulpを実行するためには、Gulp本体をプロジェクトフォルダにインストールする必要があります。

nmp install -D gulp

-Dは–save-devの省略型です。package.jsonに自動的にバージョン情報を追記してくれます。

プラグインのインストールとコンパイル処理

コンパイルを実行するためにはプラグインのインストールが必要になります。

Sassプラグインのインストール

npm install -D gulp-sass

Pugプラグインのインストール

npm install -D gulp-pug

コンパイル処理

Gulpでコンパイル処理を行うためにはjsファイルでの指示が必要になります。
プロジェクトフォルダ直下にgulpfile.jsというファイルを作成します。
基本的な流れとしては、gulpfile.jsの記述内容をCLIでgulpと命令すると実行します。
今回はSassとPugのコンパイルですが、コンパイルしたい時にいちいちgulpと入力するのは非効率なのでWatch処理で変更時に自動コンパイルする記述をします。

まず、利用するプラグインを宣言します。

var gulp = require("gulp");
var sass = require("gulp-sass");
var pug = require("gulp-pug");

次にSassのコンパイル処理です。

gulp.task("sass", function() {
    gulp.src("./sass/**/*scss")
        .pipe(sass({outputStyle: "expanded"}))
        .pipe(gulp.dest("./css"));
});

今回はプロジェクトフォルダ直下のsassフォルダ以下の.scssファイルをcssフォルダに.cssとしてコンパイルします。
3行目の{outputStyle: “expanded”}はコンパイル時のオプションで通常のCSS記述になるようにしています。

次のPugのコンパイル処理です。

gulp.task("pug", function() {
    gulp.src("./pug/**/*pug")
        .pipe(pug({pretty: true}))
        .pipe(gulp.dest("./"))
});

今回はプロジェクトフォルダ直下のpugフォルダ以下の.pugファイルをプロジェクトフォルダ直下に.htmlとしてコンパイルします。
3行目の{pretty: true}はコンパイル時のオプションで通常のインデントされたHTML記述になるようにしています。

最後にwatch処理です。

gulp.task("default", function() {
    gulp.watch("./pug/**/*pug",["pug"]);
    gulp.watch("./sass/**/*scss",["sass"]);
});

これで、CLIでgulpと入力するとwacth処理が開始され、ファイル変更時に自動コンパイルがされるようになります。
終了時はCtrl+cで解除されます。