読者です 読者をやめる 読者になる 読者になる

仕事の事やプライベートな事を適当に書いていくブログ

Teaが適当に仕事や趣味のアレコレを適当に書いていくブログです。

jadeもといpugのススメ

前々から使ってたjade、そもそもjadeとは

Jade は JST (JavaScript Templates) の一つであり、HTML を書くための軽量マークアップ言語 である Haml に影響を受けた JavaScript テンプレートエンジン

https://gist.github.com/japboy/5402844

というもので、htmlコーディングを楽にしてくれるものです。
そんなjadeですが、名前がいつの間にか可愛いものに変わっていたので、現在の開発環境といいますか、
新しく作った自分用の使い回す開発環境に取り入れてみた次第です。

とりあえず使ってみる(´・ω・`)

gulpを使ってる前提ですが、黒い画面でpugをインストールしましょう。

npm i gulp-pug --save-dev

さて、インストールされたらgulpfile.(js/coffee/ts)に設定を書いていきましょう。

//参考例
var pug = require('gulp-pug');

gulp.task('pug', function () {
  var option = {pretty: true}
  gulp.src([dir['src']+'pug/**/*.pug','!'+dir['src']+'pug/**/_*.pug'])
  .pipe(plumber())
  .pipe(pug(option))
  .pipe(gulp.dest(dir['root']));
});

な感じで書いてwatchタスクにも入れて監視してあげましょう*1

さて、ここまで来たら新規ファイルでも作ってコンパルしてみましょう。
監視中のディレクトリ内にpugファイルを作ります。
名前がjadeからpugに変わった影響で、ファイル拡張子名も変わりました。

.pug

な形で新規ファイルでも作ってあげて下さい。
pugの記法は今までと変わらず、

doctype html
html(lang="ja")
  head
  body

といったようにこれといった変更はありません*2

これをコンパイルすれば下記のようにHTMLファイルへコンパイルされてることでしょう(´・ω・`)

<!DOCTYPE html>
<html lang="ja">
  <head>
  </head>
  <body>
  </body>
</html>

pugの参考までに、自分が今使ってるサンプルデータ置いておきますね(´・ω・`)
http://eternitysky.org/download/pug_sumple.zip

よいコーディングライフを!

*1:ソースコードはあくまでも参考なので、自分の開発環境に合わせて変更してね。

*2:あくまでもさらっと使った内では。