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
よいコーディングライフを！
