gruntfile.jsのパラメータを別ファイルに分割してみた

はじめに

現在私が参画しているプロジェクトでは、 Gruntを使ってフロントエンド開発の環境構築等を自動化しております。

プロジェクトを進めていくにあたり非常に大きなgruntfileになってしまったので、 ひとまずパラメータの分割を試したのでそのまとめになります。

手順

今回私が採用した方法は マイクロソフト製のJavaScriptフレームワークのWinJSで用いられている方法を採用しました。

winjs/winjs

今回の作例では、generator-angularで作成したGruntfile.jsの connectタスク内のportとhostnameをパラメータとして別ファイルに書き出す事とします。

なお、generator-angularの導入について下記の記事を参照して下さい。

AngularJSジェネレータでコマンドを使ってみる

パラメータ用のファイルを作成します。

grunt.config.js

 
(function() {
	'use strict';
	var cfg = {};
	module.exports = cfg
	cfg.serverOpenUrl = 'http://localhost:9000'
}());

Gruntfileから作成したパラメータ用ファイルを読み込み参照します。

Gruntfile.js

 
  // Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

  // Time how long tasks take. Can help when optimizing build times
  require('time-grunt')(grunt);
  
  //Load grunt.config
  var cfg = require('./grunt.config.js');

  // Define the configuration for all the tasks
  grunt.initConfig({

Gruntfile内のパラメータを上記で読み込んだパラメータで設定します。

Gruntfile.js

 
    connect: {
      options: {
        port: cfg.connectServerPort,
        // Change this to '0.0.0.0' to access the server from outside.
        hostname: cfg.hostname,

最後に

プロジェクトを進めていくうちに便利になりつつも、Gruntfileが肥大化していっておりました。 Gruntfileのパラメータ・タスクで分割をすることで、 違う案件が始まった際もこのタスクの部分は流用すると言ったことに対応できるかと思い調べました。

なお、タスクの分割に関してはネット上にも様々な記事があるのでそちらにお任せします。