【Jade/Pug】gulpでJade / Pugをコンパイルする
以前書いたJade / Pugの記事の続きで、今回はgulpでコンパイルする方法です。
もくじ
gulpのインストール
gulpのインストールについては、以下の記事に書いてます。
すでに入ってる人はとばしてください。
以下、ターミナルorコマンドプロンプトでプロジェクトフォルダに移動している前提での話です。
gulp-jade
進める前に今回のディレクトリ構成は以下のようにしています。
./package.json
./gulpfile.js
./jade/index.jade
./jade/template/_header.jade
./html/
./node_modules/
gulpを使ったJadeのコンパイルには「gulp-jade」を使います。
ターミナルorコマンドプロンプトで以下コマンドを打ちます。
npm install gulp-jade --save-dev
gulp-jadeのインストールができたら、gulpfile.jsに以下を記述します。
var jade = require('gulp-jade'); gulp.task('jade', () => { return gulp.src(['./jade/**/*.jade', '!./jade/**/_*.jade']) .pipe(jade({ pretty: true })) .pipe(gulp.dest('./html/')); });
!./jade/**/_*.jadeと書くことで、_から始まるファイルはコンパイル対象外になります。
インクルード用のファイルをコンパイルしないようにするためです。
また、オプションで「pretty:true」とすることで、
見やすいコードでかき出してくれます。
次に、jadeファイルを用意します。
index.jade
doctype html html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title Jadeテスト body include template/_header main.main h2.content_ttl メインタイトル
_header.jade
header.header h1.sitettl Jadeテストサイトタイトル nav ul li a(href="#") Top li a(href="#") About li a(href="#") Works li a(href="#") Contact
そして、以下のコマンドでコンパイルします。
gulp jade
すると、このように書き出されました!
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style src="css/style.css"></style> <title>Jadeテスト</title> </head> <body> <header class="header"> <h1 class="sitettl">Jadeテストサイトタイトル</h1> <nav> <ul> <li><a href="#">Top</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main class="main"> <h2 class="content_ttl">メインタイトル</h2> </main> </body> </html>
簡単ですね。
gulp-pug
進める前に今回のディレクトリ構成は以下のようにしています。
./package.json
./gulpfile.js
./pug/index.pug
./pug/template/_header.pug
./html/
./node_modules/
gulpを使ったPugのコンパイルには「gulp-pug」を使います。
ターミナルorコマンドプロンプトで以下コマンドを打ちます。
npm install gulp-pug --save-dev
gulp-pugのインストールができたら、gulpfile.jsに以下を記述します。
var pug = require('gulp-pug'); gulp.task('pug', () => { return gulp.src(['./pug/**/*.pug', '!./pug/**/_*.pug']) .pipe(pug({ pretty: true })) .pipe(gulp.dest('./html/')); });
!./pug/**/_*.pugと書くことで、_から始まるファイルはコンパイル対象外になります。
インクルード用のファイルをコンパイルしないようにするためです。
また、オプションで「pretty:true」とすることで、
見やすいコードでかき出してくれます。
次に、Pugファイルを用意します。
index.pug
doctype html html(lang="ja") head meta(charset="utf-8") style(src="css/style.css") title Pugテスト body include template/_header main.main h2.content_ttl メインタイトル
_header.pug
header.header h1.sitettl Pugテストサイトタイトル nav ul li a(href="#") Top li a(href="#") About li a(href="#") Works li a(href="#") Contact
そして、以下のコマンドでコンパイルします。
gulp pug
すると、このように書き出されました!
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style src="css/style.css"></style> <title>Pugテスト</title> </head> <body> <header class="header"> <h1 class="sitettl">Pugテストサイトタイトル</h1> <nav> <ul> <li><a href="#">Top</a></li> <li><a href="#">About</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <main class="main"> <h2 class="content_ttl">メインタイトル</h2> </main> </body> </html>
簡単ですね。
さいごに
ここまでできたら、JadeやPugファイルを保存したタイミングで自動コンパイルするようにすると、爆速コーディングができますね。