Webサイト制作に便利なGruntプラグイン（その2）

#Webサイト制作に便利なGruntプラグイン（その2）

この記事の続きになります。

この記事では、個人的にWebサイト制作によく使っているGruntプラグインを、grunt-contrib以外から4つほど紹介しています。前回の記事の通り、設定例は雰囲気をつかむためのほんの一例になりますので、詳しい使い方につきましては、各々のプラグインのページを別途ご覧ください。

##load-grunt-tasks

load-grunt-tasks

プラグインを追加する度に、

package.json

grunt.loadNpmTasks('somePlugin');

を追記する必要がなくなります。

【 設定例 】
プロジェクト内のすべてのGruntプラグインを読み込みます。

package.json

require('load-grunt-tasks')(grunt);

なお、このプラグインを使わない場合でも、以下のようなスクリプトを記述することにより、プラグインの読み込みをある程度簡略化することができます。

package.json

var pkg = grunt.file.readJSON('package.json');
for (var taskName in pkg.devDependencies) {
  if (taskName.substring(0, 6) === 'grunt-') {
    grunt.loadNpmTasks(taskName);
  }
}

##grunt-usemin

grunt-usemin

JavaScriptやCSSファイルを連結し、ミニファイした上で、HTMLに記述されているそれら外部ソースの読み込み部分の記述を書き換えてくれます。

【 設定例 】
src/cssディレクトリ内のreset.cssとmain.cssを、release/css/app.min.cssに、またsrc/jsディレクトリ内のplugins.jsとmain.jsをrelease/js/app.min.jsに、それぞれ連結・ミニファイします。useminPrepareとuseminの2つのタスクから構成されています。

package.json

useminPrepare: {
  html: 'src/index.html',
  options: {
    root: 'src/',
    dest: 'release/'
  }
},
usemin: {
  html: 'src/index.html'
}

src/index.html

<!-- build:css css/app.min.css -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<!-- endbuild -->

<!-- build:js js/app.min.js -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->

上記src/index.htmlは、タスク実行後、以下のような内容でreleaseディレクトリ配下に生成されます。

release/index.html

<link rel="stylesheet" href="css/main.min.css"/>
<script src="js/app.min.js"></script>

また、スクリプトのミニファイについては、ライブラリ等に記載されているライセンスを残した状態で難読化をするのがマナーかと思いますが、grunt-useminの場合は、以下の記事に紹介されている方法で解決できます。

grunt-useminでライセンス表記を残す

##grunt-text-replace

grunt-text-replace

ファイル内にある一部の文字列を書き換えてくれます。開発時とリリース時に任意の文字列を使い分ける必要がある場合等に利用しています。

【 設定例 】
src/index.html内の"development id"という文字列を"release id"に置換し、releaseディレクトリにコピーを生成します。

package.json

replace: {
  example: {
    src: ['src/index.html'],
    dest: 'release/',
    replacements: [{
      from: "development id",
      to: "release id"
    }]
  }
}

overwriteプロパティをtrueにすると、元ファイル内の文字列を直接置換してくれます。

package.json

replace: {
  example: {
    src: ['release/index.html'],
    overwrite: true,
    replacements: [{
      from: "development id",
      to: "release id"
    }]
  }
}

正規表現を使い、HTMLの任意のコメント間の文字列をまるごと置換する事などもできます。

src/index.html

<!-- start header -->
<header>
	<h2>メインナビゲーション</h2>
	<ul>
		<li>メニュー1</li>
		<li>メニュー2</li>
	</ul>
</header>
<!-- end header -->

package.json

replace: {
  example: {
    src: ['release/index.html'],
    dest: 'release/',
    replacements: [{
      from: /<!--\s*start header\s*-->[\s\S]*<!--\s*end header\s*-->/g,
      to: '<!--#include virtual="include/header.inc"-->'
    }]
  }
}

上記は実行後、以下のように置換されます。

release/index.html

<!--#include virtual="include/header.inc"-->

##grunt-html-validation

grunt-html-validation

HTMLの構文チェックをしてくれます。CSSやJSのリントはgrunt-contrib-csslintやgrunt-contrib-jshintのように、grunt-contrib-htmllintもあれば嬉しいのですが、開発は検討中のようです。

【 設定例 】
src/index.htmlの構文チェックをします。relaxerrorに列挙しているエラーは無視します。

package.json

validation: {
  options: {
    reset: grunt.option('reset') || true,
    stoponerror: false,
    relaxerror: [
      "Bad value X-UA-Compatible for attribute http-equiv on element meta."
    ]},
    files: {
      src: ['src/index.html' ]
    }
}

ただ、自分の環境だとこのプラグインがネットワークエラーで実行できないケースがわりと頻発します。構文チェックをまめに行うような方は、別のプラグインを探された方がいいかもしれません...。

###More Plugins!
人気のプラグインは、本家サイトでも検索できるので、「こんなのないかなぁ？」と思ったら、適当に検索してみると掘り出し物が見つかるかもしれません。