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タスクも欲しいので、これもインストール。
というわけで、上記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に、
を作っちゃった。
