ぺーぺーSEのブログ

備忘録・メモ用サイト。

トップ > Node.js > Jade入門

Jade入門

Node.js HTML

HTMLプリプロセッサのJade触ってみた。
下記記事あたりは読んだテイで書く。

blog.pepese.com

blog.pepese.com

blog.pepese.com

インストール

> npm install -g jade
> jade --version
1.9.2

> jade --help

  Usage: jade [options] [dir|file ...]

  Options:

    -h, --help             output usage information
    -V, --version          output the version number
    -O, --obj <str|path>   JavaScript options object or JSON file containing it
    -o, --out <dir>        output the compiled html to <dir>
    -p, --path <path>      filename used to resolve includes
    -P, --pretty           compile pretty html output
    -c, --client           compile function for client-side runtime.js
    -n, --name <str>       The name of the compiled template (requires --client)

    -D, --no-debug         compile without debugging (smaller functions)
    -w, --watch            watch files for changes and automatically re-render
    -E, --extension <ext>  specify the output file extension
    --name-after-file      Name the template after the last section of the file
path (requires --client and overriden by --name)
    --doctype <str>        Specify the doctype on the command line (useful if it
 is not specified by the template)

  Examples:

    # translate jade the templates dir
    $ jade templates

    # create {foo,bar}.html
    $ jade {foo,bar}.jade

    # jade over stdio
    $ jade < my.jade > my.html

    # jade over stdio
    $ echo 'h1 Jade!' | jade

    # foo, bar dirs rendering to /tmp
    $ jade foo bar --out /tmp


文法

  • タグは名前だけでいい
    • 「div」→「<div>」
  • ハイフン「-」から始めた行はロジックとして解釈されJavaScriptで記述できる
    • 「- var classes = ['class1', 'class2', 'class3'];」
  • 「if-else」「unless-else」「case-when」「while」「for-in/each-in」文はハイフン「-」無しで記載できる
    • コメントは「//」
    • HTML出力されないコメントは「//-」
  • タグ名の後に「=」もしくは「!=」で変数代入すると展開される
    • 変数展開の際「=」はサニタイズされ、「!=」はサニタイズされない
  • 任意の場所で変数展開したい場合は「#{}」か「!{}」で囲む
    • 変数展開の際「#{}」はサニタイズされ、「!{}」はサニタイズされない
  • 階層（入れ子）はインデントかコロン「:」
    • インデントはスペースかタブで統一しないとエラー
  • テキストを複数行記述する場合はドット「.」か「|」
  • HTMLタグを直接使用することもできる
  • 属性はカッコ「()」で括ってカンマ「,」もしくは改行区切り
  • 連想配列変数を「&attributes()」に渡すとタグ属性の追加に使用できる
    • 「div#foo(data-bar="foo")&attributes({'data-foo': 'bar'})」
      • 「
        」
    • 「div#foo(data-bar="foo")&attributes(variable)」
  • class属性をつける際はタグ名の後にドット「.」、id属性をつける際はタグ名の後にシャープ「#」をつける
    • タグ名を省略した場合はdivタグと解釈される
    • class属性のみ配列を代入できる
  • 独自のタグを使用する場合はタグの後ろにスラッシュ「/」をつける
    • カッコ「()」の後ろでもいい
  • 「include」でHTMLやjadeファイルの内容を挿入できる
    • 「include _hoge.html」
    • 「include hoge」
      • jadeファイルの場合は拡張子不要

まだ書いてないこと

  • フィルタ機能、継承機能、
  • doctype、extends、append、prepend、mixin

参考：
http://jade-lang.com/
http://jade-lang.com/reference/
http://qiita.com/sasaplus1/items/189560f80cf337d40fdf

使い方

コンパイル

ディレクトリ配下のコンパイル

> jade directory

ファイル指定のコンパイル

> jade {file1,file2}.jade

出力ディレクトリの指定

> jade in-dir --out out-dir
> jade {file1,file2}.jade --out out-dir
Grunt Jadeプラグイン

「yo webapp」から「grunt-contrib-jade」を導入して使ってみる。
node-gypというNode.jsのネイティブ拡張モジュールをビルドするためのツールが入るのだが、Pythonが必要なので2.7辺りを入れておく。
また、「★」のモジュールもあらかじめ入れておく。

> npm install -g phantomjs # ★
> yo webapp
> npm install grunt-contrib-jade --save-dev

PhantomJSは、WebKitをヘッドレス化してJavaScript APIを利用できるようにしたツール。

「grunt-contrib-jade」を導入したので、Gruntfile.jsを追記する。

// 〜省略
        // Watches files for changes and runs tasks based on the changed files
        watch: {
            // ↓↓↓ここからコメントアウト↓↓↓
            // bower: {
            //     files: ['bower.json'],
            //     tasks: ['bowerInstall']
            // },
            // ↑↑↑ここまでコメントアウト↑↑↑
            // ↓↓↓ここから追記↓↓↓
            http: {
                files: ['<%= config.app %>/jade/{,*/}*.jade'],
                tasks: ['jade']
            },
            // ↑↑↑ここまで追記↑↑↑
            js: {
                files: ['<%= config.app %>/scripts/{,*/}*.js'],
                tasks: ['jshint'],
                options: {
                    livereload: true
                }
            },
// 〜省略
        // Empties folders to start fresh
        clean: {
            dist: {
                files: [{
                    dot: true,
                    src: [
                        // ↓↓↓ここから追記↓↓↓
                        '<%= config.dist %>/{,*/}*.html',
                        // ↑↑↑ここまで追記↑↑↑
                        '.tmp',
                        '<%= config.dist %>/*',
                        '!<%= config.dist %>/.git*'
                    ]
                }]
            },
            server: '.tmp'
        },
// 〜省略
        // ↓↓↓ここからコメントアウト↓↓↓
        // bowerInstall: {
        //     app: {
        //         src: ['<%= config.app %>/index.html'],
        //         exclude: ['bower_components/bootstrap/dist/js/bootstrap.js']
        //     }
        // },
        // ↑↑↑ここまでコメントアウト↑↑↑
        // ↓↓↓ここから追記↓↓↓
        jade: {
            compile: {
                options: {
                    data: {
                        debug: false
                    },
                    pretty: true
                },
                files: {
                    '<%= config.app %>/index.html': '<%= config.app %>/jade/index.jade',
                    '<%= config.app %>/404.html': '<%= config.app %>/jade/404.jade'
                }
            }
        },
        // ↑↑↑ここまで追記↑↑↑
// 〜省略
    grunt.registerTask('serve', function (target) {
        if (target === 'dist') {
            return grunt.task.run(['build', 'connect:dist:keepalive']);
        }

        grunt.task.run([
            'clean:server',
            // ↓↓↓ここから追記↓↓↓
            'jade',
            // ↑↑↑ここまで追記↑↑↑
            'concurrent:server',
            'autoprefixer',
            'connect:livereload',
            'watch'
        ]);
    });
// 〜省略
    grunt.registerTask('build', [
        'clean:dist',
        // ↓↓↓ここから追記↓↓↓
        'jade',
        // ↑↑↑ここまで追記↑↑↑
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'cssmin',
        'uglify',
        'copy:dist',
        'rev',
        'usemin',
        'htmlmin'
    ]);

    grunt.registerTask('default', [
        // ↓↓↓ここから追記↓↓↓
        'jade',
        // ↑↑↑ここまで追記↑↑↑
        'newer:jshint',
        'test',
        'build'
    ]);

「app/*.html」を「app/jade」配下へ移動して拡張子を「.jade」に変更して「script」「style」タグ無いのコードを「|」アウトして「grunt serve」して起動すれば成功。

参考：
http://chords.hatenablog.com/entry/2014/10/08/grunt_%2B_typescript_%2B_requirejs_%2B_jade