次に、必要なプラグインをインストールします。grunt-plugin-sampleディレクトリに移動し、「npm init」コマンドで「package.json」を作成します(全部デフォルトでOKです)。そして、GruntとCoffeeScriptプラグインをインストールしましょう。
% cd grunt-plugin-sample % npm init % npm install grunt --save-dev % npm install grunt-contrib-coffee --save-dev
「save-dev」オプションを付けているので、package.jsonに依存関係が追記されます。下記のようなpackage.jsonになっていれば、環境の用意は完了です。
- {
- "name": "grunt-plugin-sample",
- "version": "0.0.0",
- "description": "",
- "main": "index.js",
- "scripts": {
- "test": "echo \"Error: no test specified\" && exit 1"
- },
- "author": "",
- "license": "ISC",
- "devDependencies": {
- "grunt": "^0.4.4",
- "grunt-contrib-coffee": "^0.10.1"
- }
- }
CoffeeScriptをコンパイルするためのGruntfile.jsを記述しましょう。
- // 'use strict';
- module.exports = function(grunt) {
- grunt.initConfig({
- coffee: {
- compile: {
- files: {
- 'dest/sample.js': ['src/sample.coffee']
- }
- }}
- });
- grunt.loadNpmTasks('grunt-contrib-coffee');
- grunt.registerTask('default', 'coffee');
- };
grunt.loadNpmTasksでgrunt-contrib-coffeeをロードします。conffee:compileタスクが使用できるようになるので、先ほど作成したファイルとその出力先を指定しています。
また、デフォルトのタスクではcoffeeが指定されているので、実行時にタスクを指定しなくてもCoffeeScriptのコンパイルが実行されます。
全ての準備ができたのでGruntを実行してみましょう。
%grunt coffee Running "coffee:compile" (coffee) task Done, without errors.
「dest」ディレクトリを見てください。コンパイルされた結果のjsファイルが生成されています。
さて、先ほどのGruntfile.jsでコンパイルができましたが、src/sample.coffeeファイルにしか適用できません。
しかし通常の開発では、複数のcoffeeファイルを使用することが多いでしょう。そういったケースではコンパイル対象を動的に指定できます。先ほど記述したcoffeeタスクを下記のように修正してください。
- ……
- coffee:{
- compile:{
- files:[{
- expand: true,
- cwd: 'src/',
- src: ['**/*.coffee'],
- dest: 'dest/',
- ext: '.js',
- }]
- }
- }
- ……
次に「src」ディレクトリでサブディレクトリを作成し、そこに別のcoffeeファイルを作成してみましょう(sample.coffeeをコピーしても構いません)。
そして再度、coffeeタスクを実行してみてください。「src」と同じ階層でdestにディレクトリが作成され、全てのcoffeeファイルがコンパイルされています。
次に使用してみるのはファイルの変更を監視プラグインです。指定した条件に合うファイルの変更を感知したタイミングで任意のタスクを実行できます。これを利用すれば、HTML変更のタイミングでlivereload(自動更新)を行ったり、CoffeeScriptファイルやSassファイル変更タイミングでコンパイルを実行したりすることができます。
まずはgrunt-contrib-watchプラグインをインストールしましょう。
% npm install grunt-contrib-watch --save-dev
そして、先ほどのGruntfile.jsを次のように修正します。
- // 'use strict';
- module.exports = function(grunt) {
- grunt.initConfig({
- watch: {
- coffee:{
- tasks: 'coffee',
- files:['src/**/*.coffee']
- }
- },
- coffee:{
- compile:{
- files:[{
- expand: true,
- cwd: 'src/',
- src: ['**/*.coffee'],
- dest: 'dest/',
- ext: '.js',
- }]
- }
- }
- });
- grunt.loadNpmTasks('grunt-contrib-coffee');
- grunt.loadNpmTasks('grunt-contrib-watch');
- grunt.registerTask('default', 'coffee');
- };
watchタスクでは「src」以下にあるcoffeeファイルの変更を監視し、変更を検知したらcoffeeタスクを実行するように指定しています。
gruntを実行してみましょう。「grunt watch」コマンドを実行すると、ファイルの監視が始まります。
% grunt watch Running "watch" task Waiting...
この状態でcoffeeファイルを変更してみてください。ファイルを保存したタイミングでcoffeeファイルのコンパイルが実行されます。
Copyright © ITmedia, Inc. All Rights Reserved.
HTML5�ス�ス�ス�ス髯句ケ「�ス�スX 鬯ョ�ォ�ス�ェ髯区サゑスソ�ス�ス�ス�ス�コ髣包スオ隴∵コキ�ク�キ�ス�ケ隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ュ鬩幢ス「隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ー