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

dev.kokushin

HTML5、CSS3、JavaScriptを中心に、日々のプログラミングで得た知識をメモしています。

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

gulp-jade https://www.npmjs.com/package/gulp-jade

いつもどおり$ npm initした後に

$ npm install --save-dev gulp-jade

してモジュールをインストールします。

gulpfileはこんな感じにしました。 (ついでにSassとか色々突っ込んじゃいましたw)

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

参考サイト

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