Pugに入門してみる ~環境構築編その1~

2020/09/02

昨日(Pugに入門してみる ~Hello, Pug!!編~)は一通りPugを使ってHTMLを出力するところまでをやりました。
今日はgulpを使ってPugの開発環境を整えていきたいと思います。

開発環境構築

1. 必要なパッケージのインストール

まずはパッケージのインストールから。

gulp
gulp-pug

この2つをインストールします。

$ npm install gulp gulp-pug

# バージョン
gulp@4.0.2
gulp-pug@4.0.1

2. gulpfile.jsを作成する

2-1. ディレクトリ構成

下記の様なディレクトリ構成で進めていきます。
構成を変更する場合はgulpfile.jsの内容も適宜読み替えてください。

root
├─ gulpfile.js <!-- 作成する -->
├─ package.json
│ <!-- ここからは下はお好みの構成でOKです -->
├─ src/
│  ├─ index.pug
│  └─ page.pug
└─ dist/

2-2. すべての.pugファイルをコンパイルできるようにする

$ pug {ファイル名}.pugのようにしてやればコンパイル出来ますが,ファイルが増えていくとその分,手間も増えるのでコマンド1つで,すべてコンパイルできるようにします。
gulpfile.jsを編集していきます。

const gulp = require('gulp');
const pug = require('gulp-pug');

// `src`ディレクトリ配下のすべての`.pug`ファイルをコンパイルして`dist`へ出力する
gulp.task('pug', function(){
  // .pugファイルを読み込む
  gulp.src(src/**/*.pug')
    .pipe(pug({
      // pugファイルを整形するオプション
      pretty: true
    }))
    // .htmlファイルを出力する
    .pipe(gulp.dest(dist'))
});

下記コマンドを打つとすべての.pugファイルをコンパイルして出力してくれます。

$ gulp pug

まとめ

コマンド1つですべての.pugファイルをコンパイルできるようになりました。
ほんとうはリアルタイムプレビューできるところまで書きたかったのですが,時間切れです。
明日,続きを書きたいと思います。

開発環境構築

1. 必要なパッケージのインストール

2. gulpfile.jsを作成する

2-1. ディレクトリ構成

2-2. すべての.pugファイルをコンパイルできるようにする

まとめ

参考ページ

関連記事