オリジナルテンプレート・ビルド環境2013年版の作成メモ

来年に向けて、Webサイト構築時に利用するオリジナルテンプレート・ビルド環境の2013年版を整備しました。作業中に考えたことなどをメモし、2012年の研究成果の一つとしたいと思います。

テンプレート・ビルド環境の構成

tmpl-grunt-website
├ htdocs // ドキュメントルート
│ ├ _scss // mixin・カスタムSass関数/モジュール等をサブモジュールとして取り込み
│ ├ index.html
│ └ robots.txt
├ .bowerrc // Bowerの設定ファイル
├ _scss_tmpl // Sassのテンプレート
├ config.rb // Compassの設定ファイル
├ grunt.js
└ package.js

Yeomanからの移行

jQueryのカスタムビルド、MJLのカスタムビルドを通じてコマンドラインビルドツールに興味を持っていましたが、Yeomanとの出会いがきっかけで本格的にビルドツールを利用するようになりました。

Yeomanは、serverタスク実行時にLiveReloadのスクリプトを自動挿入する機能などを持っており概ね満足していましたが、

PHPが実行できない
SSIが利用できない

などの問題に気付きました。

これらは、grunt＋LiveReloadエクステンション＋Apache（XAMPP）で解決できるので、今後はgruntを利用することにしました。iPhoneなどのスマートフォン向けにはLiveReloadエクステンションがありませんので、SSI等でスクリプトを手動追加して自動リロードさせることを考えています。

Sassのmixin・カスタムSass関数/モジュール等は別リポジトリから取り込み

オリジナルのSass mixin・カスタムSass関数/モジュールは、別リポジトリで設計を行っています。そのため、このリポジトリにコピーして格納するのではなくサブモジュールとして取り込み、容易にアップデートできるようにしました。

mixinは改善を重ねていく中で不要になってしまうものが出てしまいましたが、過去のプロジェクトに影響が出ないように工夫しています。

BOWERの利用

jQueryやUnderscore.jsなどのJavaScriptライブラリ、normalize.scssなどの導入を容易にするため、パッケージマネージャ「BOWER」を利用することにしました。bower install jquery --saveのようなコマンドを実行することで、最新もしくは任意のバージョンのライブラリをプロジェクトディレクトリ内に用意することができるので、効率化が図れます。bower update [package name]で最新版への更新も行うことが可能です。

マークアップバリデータツール向けのサイトマップ作成タスク

RubyGemsのsite_validatorを用いると、作成したページをまとめてW3Cバリデーターで確認可能なことが分かりました。

site_validatorの利用にはXMLサイトマップが必要なため、オリジナルgruntプラグインgrunt-simple-xmlsitemapを作成し、sitemap.xmlを容易に作成できるようにしました。

prepareタスク

プロジェクト開始時にSassのテンプレートを_scssディレクトリにコピーしたり、サブモジュールとして取り込んだファイルから不要なファイルを削除したり、PSD格納ディレクトリなどを作成したりするprepareタスクを作成しました。

これまではinit.bashに実行権限を与えた後に実行していたのですが、今後はgrunt prepareを実行するだけで準備が完結するので、わずかですが作業を簡略化することができました。

JavaScriptプラグイン集約の自動化

自作のJavaScriptプラグインやjQueryプラグインを1ファイルに集約する作業をこれまで手作業で行っていましたが、今後はgruntのconcatタスクで行うようにルールの策定・タスク設定を実施しました。

CoffeeScriptの採用を検討

CodeGridの記事を読んだことがきっかけとなってCoffeeScriptを実際に書いてみたところ、非常に好印象を持ちました。その日のTweetで「varを書かなくて良い点やインデントでスコープを表す点が良いなと思いました。コードがシンプルに見えますね。サンプルのクラスは変換結果もだいたい予想できました。」と感想を残しています。本格採用しようかまだ少し迷っていますが、coffeeタスクを用意していつでも導入できるよう準備を整えました。

スタイルガイドも検討中

StyleDoccoを利用したスタイルガイドの作成が話題になっていますが、前職での経験を元にオリジナルのスタイルガイド（モジュール一覧）作成をサポートするJavaScriptを昨年夏に作成しており、どちらを利用するかは引き続き検討したいと思います。

Sassからgrunt-styleguideを利用してスタイルガイドを生成するタスクのサンプルはGistにアップしています。

grunt.jsサンプル

module.exports = function(grunt) {
 'use strict';

 grunt.initConfig({
 compass: {
 dev: {
 reference: {
 'htdocs/common/css': 'htdocs/_scss'
 },
 options: {
 config: 'config.rb',
 environment: 'development'
 }
 },
 dist: {
 reference: '<config:compass.dev.reference>',
 options: {
 config: 'config.rb',
 environment: 'production',
 force: true
 }
 }
 },
 coffee: {
 options: {
 bare: true
 },
 compile: {
 files: {
 'htdocs/common/js/run.js': 'htdocs/_coffee/run.coffee'
 }
 }
 },
 concat: {
 compo: {
 src: ['jslib/components/*.js'],
 dest: 'htdocs/common/js/components.js'
 }
 },
 watch: {
 compass: {
 files: 'htdocs/**/*.scss',
 tasks: 'compass:dev reload'
 },
 coffee: {
 files: 'htdocs/**/*.coffee',
 tasks: 'coffee reload'
 },
 concat: {
 files: 'jslib/components/*.js',
 tasks: 'concat:compo reload'
 },
 reload: {
 files: [
 'htdocs/**/*.html',
 // 'htdocs/**/*.js',
 'htdocs/**/*.png',
 'htdocs/**/*.jpg'
 ],
 tasks: 'reload'
 }
 },
 xmlsitemap: {
 files: ['htdocs/**/*.html'],
 dest: 'sitemap.xml',
 options: {
 exclude: ['/_scss', '/tmpl'],
 host: 'http://www.foo.com',
 base: 'htdocs'
 }
 },
 docco: {
 dist: {
 src: ['htdocs/**/*.js'],
 options: {
 output: 'docs/scripts/'
 }
 }
 },
 img: {
 dist: {
 src: ['htdocs/**/*.png', 'htdocs/**/*.jpg']
 }
 },
 optipng: {
 args: ["-o4", "-strip all"]
 },
 server: {
 port: 3501,
 base: './htdocs'
 },
 reload: {
 port: 35729,
 liveReload: {}
 },
 open: {
 dev: {
 options: {
 host: 'foo.localhost',
 port: '80'
 // port: '<config:server.port>'
 }
 }
 },
 growl: {
 notify: true
 },
 lint: {
 files: ['grunt.js', 'tasks/**/*.js']
 },
 jshint: {
 options: {
 curly: true,
 eqeqeq: true,
 immed: true,
 latedef: true,
 newcap: true,
 noarg: true,
 sub: true,
 undef: true,
 boss: true,
 eqnull: true,
 node: true,
 es5: true
 },
 globals: {}
 }
 });

 grunt.loadNpmTasks('grunt-compass-multidir');
 grunt.loadNpmTasks('grunt-contrib-coffee');
 grunt.loadNpmTasks('grunt-simple-xmlsitemap');
 grunt.loadNpmTasks('grunt-docco');
 grunt.loadNpmTasks('grunt-img');
 grunt.loadNpmTasks('grunt-reload');
 grunt.loadTasks('tasks');

 // grunt.registerTask('default', 'compass:dev server reload open:dev watch');
 grunt.registerTask('default', 'compass:dev reload open:dev watch');
 grunt.registerTask('dist', 'img compass:dist');
};

追記

2013年1月2日

JavaScriptのドキュメント作成のために、Backbone.jsでも利用されているdoccoを採用しました。