[email protected]系(開発版)自分用メモ

grunt-memo.md

[email protected]系(開発版)自分用メモ

[email protected]系でStylusのコンパイル、Styledoccoの生成、CSSファイルの結合・minifyを自動化するためのメモ。
環境の構築はpackage.jsonで行う。

gruntに関連したpackage.json周りはこのページが詳しい。
Gruntによる継続的なビルド環境を求めて 〜 package.jsonと0.4.0のこと ::ハブろぐ

準備

必要なgruntプラグインの依存情報を書いたpackage.jsonをプロジェクトディレクトリに用意し、npm linkを叩いて一瞬でビルド環境をつくる（初期化する）。

{
  "name": "grunt-test",
  "version": "0.0.1",
  "author": "konitter",
  "dependencies": {},
  "devDependencies": {
    "grunt": "~0.4.0rc2",
    "grunt-contrib-stylus": "~0.3.1",
    "grunt-contrib-watch": "~0.1.2",
    "grunt-contrib-mincss": "~0.3.2",
    "grunt-styleguide": "~0.2.1",
    "grunt-contrib-clean": "~0.4.0a",
    "grunt-contrib-concat": "~0.1.1"
  },
  "optionalDependencies": {}
}

↑こんなやつを予めGruntfile.jsやタスクファイル等と合わせて自分のGitHubのリポジトリに上げといて、プロジェクトディレクトリでgit cloneする。

# その他必要なものをclone
% git clone [email protected]:konitter/grunt-build.git ./

# ビルド環境を初期化
% npm link

するとgruntプラグインが自動的に./node_modulesに入る。

Gruntfile.js

Gruntfile.jsの中身はこんな感じ。

'use strict';

module.exports = function(grunt) {

  grunt.initConfig({

		stylus: {
			dist: {
				files: {
					// stylファイルを同名のcssでコンパイル
					'src/css/*.css': 'src/stylus/*.styl'
				},
				options: {
					compress: false, // Styledoccoの為にここではminifyしない
					paths: [
						'src/stylus/include' // importファイル用のパス設定
					]
				},
				// src/stylus配下のstylファイルを監視
				watch: ['src/stylus/**/*.styl']
			}
		},

		mincss: {
			compress: {
				files: {
					'dist/css/all.min.css': 'dist/css/all.css' // all.cssをminify
				}
			}
		},

		concat: {
			css: {
				src: ['src/css/*.css'], // src/css配下のcssを結合してall.cssに
				dest: 'dist/css/all.css'
			}
		},

		styleguide: {
			dist: {
				options: {
					name: 'Style Guide', // スタイルガイドのタイトル
				},
				files: {
					'docs': 'src/css/*.css' // src/css配下のcssで生成
				}
			}
		},

		clean: ['docs'],
		watch: {
			stylus: {
				files: ['<%= stylus.dist.watch %>'],
				tasks: ['stylus', 'concat', 'mincss']
			},
			styleguide: {
				files: ['src/css/*.css'],
				tasks: ['clean', 'styleguide']
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-stylus');
	grunt.loadNpmTasks('grunt-contrib-mincss');
	grunt.loadNpmTasks('grunt-contrib-clean');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-styleguide');

	grunt.registerTask('default', ['watch']);
};

本来ならもっとシンプルにできるはずなんやけど、自分の環境では何故かgrunt-styleguideが一度生成したスタイルガイドを2回目以降上書きしてくれないため、2回目以降は一度作ったスタイルガイドをgrunt-contrib-cleanで削除してから生成する、というかなりスマートじゃないことをやっている。

grunt-styleguideには0.4系対応を見越したブランチ「0.4-Only」があるが、更新はほとんどされてないようでこのブランチ指定でプラグインをインストールしても症状は今のところ改善しない。

ディレクトリ構成

• dist
  • css
    • all.css (src/css内のcssを結合したcss)
    • all.min.css (all.cssをminifyしたcss)
• docs (Styledoccoのファイル)
• src
  • css (*.stylをコンパイルしたcss、Styledoccoのindex.htmlで使うREADME.mdも)
  • stylus (作業するのはここにある*.stylファイル)
    • include (import用.stylファイル)