grunt-wiredepでBowerが依存するBootstrapのCSSコンポーネントがHTMLドキュメントに差し込めない

grunt-wiredepでBowerが依存するBootstrapのCSSコンポーネントがHTMLドキュメントに差し込めない [Edit]

投稿者：野中文雄 | 投稿日：2015.11.16 | [HTML5]

grunt-wiredepはGruntのプラグインで、Bowerが依存するコンポーネントを予め定めたHTMLドキュメントのコードに埋め込みます。ところが、BootstrapパッケージのCSSを差し込めないことがあります。GitHub「Problem getting bootstrap.css to be included using wiredep #1116」やStack Overflow「Grunt Wiredep not injecting bootstrap css files in Yeoman Angular Tutorial」などで報告されました。

01 grunt-wiredepでBowerが依存するコンポーネントをHTMLドキュメントに差し込むには

Bootstrapパッケージには、Bowerが依存するJavaScriptやCSSのコンポーネントが含まれています。これらをgrunt-wiredepでHTMLドキュメントに差し込むにはどうするのか、先に確かめておきましょう。なお、GruntとBowerのインストールについては、タチコマ好きなエンジニアのブログ「GruntとBowerを使ってWeb開発用のテンプレートを作成する」をご参照ください。

まず、NPMでブラグインgrunt-wiredepをインストールします(grunt-wiredep「Getting Started」参照)。


npm install --save-dev grunt-wiredep

つぎに、gruntfile.jsにgrunt-wiredepの読み込みとタスクを書き加えます(「Grunt 日本語リファレンス」「Gruntfileについて」参照)。module.exportsに定めるラッパー関数の中で、grunt.loadNpmTasks()メソッドの引数に文字列"grunt-wiredep"を渡すと、プラグインが読み込まれます。そして、grunt.initConfig()メソッドに与えるタスク(wiredep)のプロパティtaskの中で、srcに差し込み先HTMLドキュメントのパスを書き加えます。


module.exports = function(grunt) {
	grunt.initConfig({

		wiredep: {
			task: {
				src: 'builds/development/**/*.html'
			}
		}

	});

	grunt.loadNpmTasks('grunt-wiredep');

};

そして、差し込み先のHTMLドキュメントに、Bowerが依存するCSSやJavaScriptコンポーネントを加えたい箇所は、つぎのようなコメントのかたちで定めます。


<!-- bower:css -->
<!-- endbower -->

<!-- bower:js -->
<!-- endbower -->

そのうえでコマンドラインツールから、Bowerのinstallコマンドでパッケージをインストールし、Gruntに定めたgrunt-wiredepのタスク(wiredep)を実行します。


bower install --save bootstrap

grunt wiredep

タスクが正しく実行されると、HTMLドキュメントの指定した箇所にCSSやJavaScriptのコンポーネントが書き加えられます。


<!-- bower:css -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->

<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->

02 Bootstrap 3.3.5のパッケージからgrunt-wiredepでCSSコンポーネントがHTMLドキュメントに差し込まれない

本稿執筆時では、Bootstrap 3.3.5のパッケージからgrunt-wiredepでCSSコンポーネントがHTMLドキュメントに差し込まれません。JavaScriptのコンポーネントは正しく書き込まれます。


<!-- bower:css -->
<!-- endbower -->

<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->

対応方法のひとつは、Bootstrap 3.3.5のパッケージは除いて、Bootstrap 3.3.4に落とすことでしょう。インストールするバージョンを特定するには、パッケージ名に続けてハッシュマーク(#)と番号を書き加えます。そのうえで改めてGruntのタスクを実行します。


bower uninstall --save bootstrap

bower install --save bootstrap#3.3.4

grunt wiredep

grunt-wiredepはBootstrap 3.3.4のパッケージからであれば、Bowerが依存するCSSコンポーネントを正しくHTMLドキュメントに加えます。


<!-- bower:css -->
<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.css" />
<!-- endbower -->

<!-- bower:js -->
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- endbower -->

03 bower.jsonファイルの仕様に問題

Bootstrap Blog「Bootstrap 3.3.5 released」は「wiredep and Bower」の項でこの問題について触れ、Bowerの定義ファイルbower.jsonの仕様は曖昧だったためにgrunt-wiredepが処理を誤ったとしています。そのため、Bowerの仕様は改定が進められているそうです。また、Bootstrap 3.3.5でも、ファイルbower.jsonのmainを再定義すれば処理は正せるとしています(前出「Bootstrap 3.3.5 released」参照)。


"overrides": {
	"bootstrap": {
		"main": [
			"dist/js/bootstrap.js",
			"dist/css/bootstrap.css",
			"less/bootstrap.less"
		]
	}
}

F-site