.NET開発者のためのJavaScriptライブラリカタログ（Grunt編）：特集：今から始めるJavaScriptアプリ開発（3/3 ページ）

Webアプリ開発における日々の煩雑な作業を自動化してくれるツールである「Grunt」の基本を今回は見ていこう。

LINE

Hatena

パッケージ内容の読み込みとバナーの追加

　Gruntでは、そのプロジェクトの構成や依存関係を記述したpackage.jsonファイルの内容を読み込んで、それをタスク内で使用することもできる。これには例えば、次のように記述する（以下はあくまでも例である。uglifyタスクは本来、最小化を行うタスクなのでこういうものは入れない方が好ましい）。

module.exports = function (grunt) {
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '// <%= pkg.name %>: <%= pkg.version %>'
      },
      …… 省略 ……
    },
    …… 省略 ……
});
…… 省略 ……
};

package.jsonファイルの読み込みとバナーの追記

　package.jsonファイルの読み込みにはgrunt.file.readJSONメソッドを使う。これにより、package.jsonファイルの内容が読み込まれる。その内容は「<%= %>」で囲むことで利用できる。

　この例では、「uglify」タスクのoptionsプロパティ（とは、このタスクのオプションのことだ）で「banner」プロパティを指定して、パッケージ名（pkg.nameプロパティ）とそのバージョン（pkg.versionプロパティ）を「site.min.js」ファイルの先頭に追記するようにしている。

　このようにinitConfigメソッド内では、タスク名以外のプロパティを追加することで、これを内部で「<%= %>」表記を使い参照できるようになる。もう一つ例を示しておこう。例えば、grunt-contrib-concatプラグインを使い、ファイルの連結だけを行うタスクがあったとする（「grunt-contrib-concat」プラグインの使い方についてはこれまでと同様なので省略する）。できるのはall.jsファイルとall.cssファイルの二つだ。

module.exports = function (grunt) {
grunt.initConfig({
    concat: {
      js: {
        src: [
          'wwwroot/js/**/*.js',
          '!wwwroot/js/site.min.js',
          '!wwwroot/js/all.js'
        ],
        dest: 'wwwroot/js/all.js'
      },
      css: {
        src: [
          'wwwroot/css/**/*.css',
          '!wwwroot/css/site.min.css',
          '!wwwroot/css/all.css'
        ],
        dest: 'wwwroot/css/all.css'
      }
    },
    uglify: {
      js: {
        src: [
          'wwwroot/js/**/*.js',
          '!wwwroot/js/site.min.js',
          '!wwwroot/js/all.js'
        ],
        dest: 'wwwroot/js/site.min.js'
      }
    },
    cssmin: {
      css: {
        src: [
          'wwwroot/css/**/*.css',
          '!wwwroot/css/site.min.css',
          '!wwwroot/css/all.css'
        ],
        dest: 'wwwroot/css/site.min.css'
      }
    }
});

…… 省略 ……
grunt.loadNpmTasks('grunt-contrib-concat');
};

JavaScriptファイルの連結タスク／最小化タスク、CSSファイルの連結タスク／最小化タスクでsrcプロパティが同じ

　注目してほしいのは、JavaScriptファイルを連結するタスク（「concat:js」タスク）と最小化するタスク（「uglify:js」タスク）で、srcプロパティの値が同じことだ。ここでは、どちらも『「wwwroot/js」ディレクトリ以下にあるJavaScriptファイルのうち、これらのタスクが生成したものを除いたもの全て』ということになっている（要するに「all.js」ファイルと「site.min.js」ファイルは除外する）。CSS関連のタスクについても同様だ。

　これらは重複している上に、入力が煩雑だ。というわけで、一つにまとめるのが正しい。これはもっと単純に次のように記述できる。

module.exports = function (grunt) {
grunt.initConfig({
    jssrc: [
      'wwwroot/js/**/*.js',
      '!wwwroot/js/site.min.js',
      '!wwwroot/js/all.js'
    ],
    csssrc: [
      'wwwroot/css/**/*.css',
      '!wwwroot/css/site.min.css',
      '!wwwroot/css/all.css'
    ],
    concat: {
      js: {
        src: '<%= jssrc %>',
        dest: 'wwwroot/js/all.js'
      },
      css: {
        src: '<%= csssrc %>',
        dest: 'wwwroot/css/all.css'
      }
    },
    …… 省略 ……
});

…… 省略 ……
};

処理対象のファイルの指定を1カ所にまとめる

　このように共通要素をプロパティにくくりだし、「<%= %>」記法を使って、それらを参照することでGruntfile.jsファイルを読みやすく、かつメンテナンスしやすくできる。

　今回は成果物をクリーンするタスクは定義しなかったが、興味のある方はgrunt-contrib-cleanプラグインを使って、勉強がてらタスクを定義してみよう。

　今回はVS 2015環境でGruntを使用して、タスクを自動化する基礎について見た。gulpとGruntでは、できることは似たようなものだが、Node.jsのストリームAPIをベースにJavaScriptベースでタスクを定義していくgulp、JSONでの記述がメインとなるGruntとその特徴は大きく異なる。また、gulpでは単一機能を提供するプラグインを組み合わせて一つのタスクとするのに対して、Gruntではプラグインが提供する処理の粒度がもう少し大きくなるようだ。どちらを選択するかは、個々人の好みということもあるだろうが、VS 2015でgulpが採用されるなど、今後の主流となりそうなのはgulpかもしれない。

　Grunt自体の詳細な解説は「Gruntで始めるWeb開発爆速自動化入門」を参照してほしい。

「特集：今から始めるJavaScriptアプリ開発」

.NET開発者のためのJavaScriptライブラリカタログ（Grunt編）：特集：今から始めるJavaScriptアプリ開発（3/3 ページ）

パッケージ内容の読み込みとバナーの追加

総合記事ランキング