strix01: モックhtmlはJade+LESS+CoffeeScript+Grunt.jsで。

WebサイトやWebアプリケーションの画面仕様やデザインの検討や確認のために、モックhtmlを書くことが度々あった。そのたびに、テキストエディタで、生のhtml、css、Javascriptをガシガシ書いていた。が、ページ数が多くなるに連れて、DRYじゃないことに憤りを感じ、メンテナンスが面倒になり、もっと効率良く、メンテナンスが楽にできないものなのか、と考えていた。

node.jsの勉強をしていて、express.jsに出会い、テンプレートエンジンJadeとメタCSS言語LESSに出会った。Railsを使った開発では、CoffeeScriptを使っていた。そこで、これらを使って静的なページを作るとかなり効率がいいのでは？と思った。

モックをはやく作るための道具

JadeとLESS、CoffeeScriptで静的なHTMLを作れないか。
Jadeは単体で使える。
LESSも単体でコンパイルできる。
もちろんCoffeeSriptも。
で、全部Node.jsの上で動く。
全部一発でビルドできれば、そりゃあ楽ちんだわぁ。
そういえば、Grunt.jsっていうのがあったな、たしか。
Javaのapache antみたいなやつ。

ということで、使うのは、

node.jsとGrunt.jsのインストール

node.jsは予めインストールしておく必要がある。Grunt.jsは、grunt-cliというGrunt.jsのCLIパッケージをnpmでインストールする。

  $ npm install -g grunt-cli

ディレクトリとファイル

おそらく、こうしなければよい、という構造はない。とりあえず、次のようなディレクトリ階層を作成し、2つのファイル、package.jsonとGruntfile.jsを作った。

├── Gruntfile.js
├── package.json
└── src
    ├── coffee
    │   └── jade-de-mock.coffee
    ├── jade
    │   ├── includes
    │   │   └── javascripts.jade
    │   ├── index.jade
    │   └── layout.jade
    └── less
        ├── jade-de-mock.less
        └── reset.less

Grunt.jsのプラグインとタスク

jadeのコンパイルや、lessのコンパイル、coffeeのコンパイルは、Grunt.jsのプラグインを利用する。そのため、まず、Grunt.jsが動作する環境を整備しないと。

package.jsonを書く

  {
    "name": "jade-de-mock",
    "version": "0.1.0"
  }

gruntとgruntプラグインをnpmでインストールする。

jade、less、coffeeのgruntプラグインは、grunt.jsが提供してくれている。

それと、前回のビルド結果を相違するcleanタスクも欲しいので、これもインストール。

grunt-contrib-clean

というわけで、上記4つのgruntプラグインを、npmコマンドでインストール。

  $ npm install grunt --save-dev
  $ npm install grunt-contrib-jade grunt-contrib-less grunt-contrib-coffee grunt-contrib-clean --save-dev

これを実行すると、上述のpackage.jsonにプラグインが追記され、結果、

  {
    "name": "jade-de-mock",
    "version": "0.1.0",
    "devDependencies": {
      "grunt": "~0.4.1",
      "grunt-contrib-coffee": "~0.7.0",
      "grunt-contrib-clean": "~0.5.0",
      "grunt-contrib-jade": "~0.8.0",
      "grunt-contrib-less": "~0.7.0"
    }
  }

となる。

Gruntfile.jsを書く

Gruntfile.jsは、apache-antでいうところのbuild.xmlのようなもの。gruntに実行させるタスクをJavascriptで書く(CoffeeScriptでも良い)。

module.exports = function(grunt) {

  // project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    jade: {
      compile: {
        options: {
          pretty: true
        },
        files: {
          "dst/index.html": ["src/jade/index.jade"]
        }
      }
    },
    less: {
      compile: {
        options: {
          compress: true,
          syncimport: true
        },
        files: {
          "dst/stylesheets/<%= pkg.name %>.min.css": "src/less/jade-de-mock.less"
        }
      }
    },
    coffee: {
      compile: {
        files: {
          "dst/javascripts/<%= pkg.name %>.js": "src/coffee/*.coffee"
        }
      }
    },
    clean: {
      build: ["dst"]
    }
  });

  // load npm tasks.
  grunt.loadNpmTasks('grunt-contrib-jade');
  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-clean');

  // define default tasks.
  grunt.registerTask('default', ['clean', 'jade', 'less', 'coffee']);

};

これで準備完了。

モックを書く。

ひたすらモックを書く。Jadeを書く。LESSを書く。CoffeeScriptを書く。

ビルドする。

ビルドはGrundコマンドで実行。先ほどのGruntfile.jsにしたがって、タスクが実行される。

  $ grunt

これで、dstディレクトリが生成され、次のようなファイルが出力される。

  dst/
  ├── index.html
  ├── javascripts
  │   └── jade-de-mock.js
  └── stylesheets
       └── jade-de-mock.min.css

モックを作るたびに使えばいい

と思ってgithubに、

shimar/jade-de-mock

を作っちゃった。

strix01

2013/08/10

モックhtmlはJade+LESS+CoffeeScript+Grunt.jsで。