Jade はじめました
突然ですが「Jade」はじめました。
いままで「EJS」を使っていたのですが、「両方使えたほうが状況によって使い分けれるから便利だよ☆」と教えていただいたので勉強することにしました。
「EJS」と「Jade」の違い
まあ見れば分かるんですけど、書き方が全然違います。
EJS
「EJS」はHTMLにそのままタグを埋め込んだりして使います。 PHPに近い書き方ができるので、僕は簡単に使いはじめることが出来ました。
<% var name = 'kokushin'; %>
<div class="profile">
<p>私の名前は<%= name %>です。</p>
</div>
普通のHTMLでも動くので、初心者でも取っ付き易いです。
ただ、HTML内に変数とか書きまくるとぐっちゃぐちゃになってスパゲティコードになりやすいです。 オエー。
Jade
一方Jadeはめっちゃ綺麗にかけます。
- var name = 'kokushin'
div.profile
p 私の名前は#{name}です。
そうです、閉じタグがいらないんですね。 なのでマークダウン記法並みにめちゃめちゃ早く書くことが出来ます。
まだ今の段階では触れてないんですが、分割ファイルのインクルードやブロックの継承などが行えるみたいです。
弱点は記法を覚えないと使えないこと。 といってもインデントの使い方さえわかればあとは直感でなんとかなるでしょう。
Jade + Gulpでコンパイル環境を作る
Jadeを使うにはコンパイル環境が必要になりますので、gulp-jadeを利用します。
gulp-jade https://www.npmjs.com/package/gulp-jade
いつもどおり$ npm initした後に
$ npm install --save-dev gulp-jade
してモジュールをインストールします。
gulpfileはこんな感じにしました。 （ついでにSassとか色々突っ込んじゃいましたｗ）
var gulp = require('gulp'),
jade = require('gulp-jade'),
sass = require('gulp-sass'),
plumber = require('gulp-plumber'),
autoprefixer = require('gulp-autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
browserSync = require('browser-sync'),
reload = browserSync.reload;
gulp.task('jade', function() {
return gulp.src('./app/**/*.jade')
.pipe(plumber())
.pipe(jade())
.pipe(gulp.dest('./dist/'));
});
gulp.task('jade-watch', ['jade'], reload);
gulp.task('sass', function() {
return gulp.src('./app/sass/**/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./dist/assets/css'))
.pipe(reload({stream: true}));
});
gulp.task('default', ['sass', 'jade'], function() {
browserSync.init({
notify: false,
port: 3000,
server: './dist/'
});
gulp.watch('./app/sass/**/*.scss', ['sass']);
gulp.watch('./app/**/*.jade', ['jade-watch']);
});
ディレクトリ構造は
app/
├ index.jade
└ sass/
├ main.scss
└ _base.scss
コンパイルされたindex.htmlはappと同階層のdistデレクトリへ吐き出されます。
あとこのままだとHTMLが圧縮されて出力されちゃうんですが、
jade()オプションにpretty: true指定しとくと整形して出力してくれるみたい。
とりあえず
サンプルをGithubにあげときました。 https://github.com/kokushin/jade-test
