本文へジャンプ

Gruntで効率化！Grunfile.jsの設定ファイル作る

Posted by MONSTER DIVE

今回は、Gruntfile.jsとは別にファイルを用意して、タスクの設定を外部に持たせる方法を紹介したいと思います。

Gruntfile.jsを書いていくとタスクが多くなり、どこに何のパラメータがあるかが分かりにくくなります。プロジェクトに応じては、膨大なGruntfile.jsになってしまい、作った人でないとファイルの修正・更新が難しくなってしまいます。

外部ファイルに設定を持たせておけば、誰でも簡単に設定が変更できるようになります。では、どのように設定ファイルにパラメータを持たせるか、解説していきます。

設定ファイルについて

今回、設定することは主に以下の3つです。

  • Sassのコンパイル方法を選択
  • CSSの出力ディレクトリを設定する
  • 納品する際の不要なファイルを削除する

具体的にその方法を解説しましょう。

ディレクトリ構成

ディレクトリ構成は、下記の形とします。まずはGruntfile.jsとは別に、config.js用意します。フォルダ構成や役割については、こちらと併せて読むと分かりやすいかと思います。

project/                        # Sass(SCSS)などのコンパイルして使うファイルのフォルダ
|-- src/
|   `-- sass/
|       |-- style.scss
|       |-- page1/
|       |   `-- style.scss
|       `-- page2/
|-- bin/                        # ローカルの作業フォルダ
|   |-- sample.txt
|   |-- index.html
|   |-- page1/
|   |   `-- css/
|   |-- page2/
|   |   `-- css/
|   ...
|-- release/                    # 納品フォルダ
|-- config.js                   # 設定ファイル
`-- Gruntfile.js

config.js

'use strict';
var
    config = {
        // Sassのコンパイル方法を選ぶ
        hasCompass: false,
        // CSSの出力ディレクトリを設定する
        sassDirs:[
            ['page1', 'page1/css/'],
            ['page2', 'page2/css/']
        ],
        // 納品する際の不要なファイルを削除する
        deleteFiles:[
            'release/sample.txt'
        ]
    };

module.exports = config;

それでは、それぞれ何をしてるのか説明しましょう。

Sassのコンパイル方法を選ぶ

Sassのコンパイルの方法を切り替えます。案件によっては、Sassのみで書く場合、CompassでSassをコンパイルする必要ないのでSassタスクを実行。Compassが必要な場合は、Compassタスクでコンパイルを実行します。

コンパイル方法の変更は、hasCompassのboolean値を変更することによって、コンパイル方法を選択することが可能です。

hasCompass: false       # Sassタスクを使ってSassをコンパイル
hasCompass: true        # Compassタスク使ってSassをコンパイル

CSSの出力ディレクトリを設定する

案件によっては、レギュレーションやフォルダ構成の指定があると思います。例えば、ページごとにCSSを分けたいといった場合です。

project/
|-- page1/
|   |-- index.html
|   |-- css
|   |-- images
|   |-- js
`-- page2/
    |-- index.html
    |-- css
    |-- images
    `-- js

Gruntfile.jsにタスクを追加していけば良いのですが、ページが増えるたびにタスクを修正するのは面倒です。そこで、設定ファイルからCSSの出力先を変更できるようにします。

設定は、sassDirsで行います。コンパイルするSassファイルのディレクトリと出力先のCSSのディレクトリを選択します。1番目の値でSassフォルダ内のディレクトリを指定、2番目の値でSassの出力先を設定します。

sassDirs:[
    ['Sassのディレクトリ1', 'CSSの出力先1'],
    ['Sassのディレクトリ2', 'CSSの出力先2']
]

納品する際の不要なファイルを削除する

開発時は必要でも、納品時には不要なファイルがある場合があると思います。それを毎回、手動で消すのは結構な手間です。ファイルの削除はGruntにやってもらって、設定ファイルには削除するファイル・フォルダまでのパスを記載していきます。

deleteFiles:[
    'release/sample.txt'
]

ここまでがconfig.jsの説明になります。今度はGrunt側の設定を書いていきたいと思います。

Gruntfile.jsでやること

Gruntfile.jsが行うことは下記の通りです。

Sassをコンパイルする

  1. Webサーバーを起動
  2. Sassファイルを監視して、プロパティを揃えてCSSを出力
  3. Gruntで立ち上げたWebサーバーを自動リロード

納品ファイルの制作

  1. releaseフォルダを削除
  2. binフォルダ内のファイルをコピー
  3. htmlとCSSが圧縮されたものをreleaseフォルダに出力
  4. releaseフォルダ内の不要ファイルを削除

コマンド

Gruntfile.jsを設定して、ターミナル・コマンドプロントから指定ディレクトリに移動して下記のコマンドを叩きます。

grunt watch         #Sassをコンパイルする
grunt release       #納品ファイルの制作

Gruntfile.jsの設定

具体的に、Gruntfile.jsを行っていましょう。まずは、pakage.jsonに必要なモジュールを記述して、モジュールをインストールします。

pakage.json

今回、一通りタスクを行うために必要なモジュールは下記の通りです。

grunt-este-watch            # ファイルを監視するモジュール
grunt-contrib-copy          # ファイルコピーするモジュール
grunt-contrib-htmlmin       # HTMLを圧縮するモジュール
grunt-contrib-cssmin        # CSSを圧縮するモジュール
grunt-csscomb               # CSSのプロパティの順番を揃えるモジュール
grunt-contrib-sass          # Sassをコンパイルするモジュール
grunt-contrib-livereload    # ファイル変更時にブラウザを更新するモジュール
grunt-contrib-connect       # Webサーバーを立ち上げる

モジュールのインストールが完了したら、Gruntfile.jsにタスクを設定してきます。

config.jsからパラメータを取得する

まずはgruntfile.jsにconfig.jsにパラメータを読み込みます。config.hasCompass等で値にアクセスすることができます。config.jsで設定した値を変数に格納しましょう。

var config = require('./config.js');

Sassの出力方法を選択する

config.jsに設定したhasCompassのパラメータに応じてSassの出力方法を変えます。

var typeofCompiledSass = '';
config.hasCompass ? typeofCompiledSass = 'compassMultiple' : typeofCompiledSass = 'sass';

次にSassが更新された際に、自動的にコンパイルするタスクを書いていきます。処理の内容としては、

  1. Sassファイルを監視、
  2. Sassが更新されたらtypeofCompiledSassに応じて、SassタスクかCompassタスクを呼び出す
  3. SassのコンパイルがCSSプロパティを揃えて、livereloadでブラウザを更新する
esteWatch: {
    options: {
        livereload: {
            enabled: true,
            extensions: ['html', 'scss'],
            port: 35729
        },
        dirs: [
            '<%= dir.src %>/<%= dir.sass %>/**'
        ]
    },
     // sassが更新された際のタスクをセットする
    'scss': function(filepath) {
        return [typeofCompiledSass, 'csscomb']
    }
}

Sassタスクにコンパイル元とコンパイル先を設定する

config.jsからfor文でSassのタスクに必要なパラメータ取得して、配列に格納していきます。今回は、Sassのタスクのみご紹介します。

※Compassを利用する際は、別途設定が必要です。

var 
    sassFilesArr = [],
    setCompileSass = function() {
        var
            _length = config.sassDirs.length,
            _i = -1,
            _sassObj = {};
        if(_length > 0) {
            for(_i, _length; ++_i < _length;) {
                _sassObj.expand = true;
                _sassObj.cwd = '<%= dir.src %>/<%= dir.sass %>/' + config.sassDirs[_i][0];
                _sassObj.src =  ['*.scss'];
                _sassObj.dest = '<%= dir.bin %>/' + config.sassDirs[_i][1];
                _sassObj.ext = '.css';
                sassFilesArr[_i] = _sassObj;
                _sassObj = {};
            }
        } else {
            // sassDirsの数が0の場合は、Sassフォルダ内のファイルをbinのCSSフォルダに出力
            _sassObj.expand = true;
            _sassObj.cwd = '<%= dir.src %>/<%= dir.sass %>';
            _sassObj.src =  ['*.scss'];
            _sassObj.dest = '<%= dir.bin %>/<%= dir.css %>';
            _sassObj.ext =  '.css';

        }
    };

Sassをコンパイルタスクに、格納したパラメータをセットします。

/**
 * sassタスクの設定
 * オプションやコンパイル元とコンパイル先は、config.jsで設定
 **/
sass:{
    dist: {
        files: sassFilesArr
    }
}

納品時に不要なファイルを削除する

納品時に不要なファイルの設定は、cleanタスクにconfig.jsで設定したパラメータをセットします。gruntでreleaseコマンド時にタスクを実行します。

clean: {
    // releaseから不要なファイルを削除する
    files: {
        src: config.deleteFiles
    }
}

gruntのコマンドについて

最後に、Gruntのコマンドを用意します。

grunt.registerTask('watch', ['connect', 'esteWatch']);
grunt.registerTask('release', ['clean:release', 'copy', 'htmlmin', 'cssmin', 'clean:files']);

まとめ

外部から動的にタスクを追加できるGruntの仕組みを作っておくことによって、毎回Gruntfile.jsを修正する手間を省くことができます。また、パラメータを変更する、Gruntfile.js側に渡すことによってタスクを動的に設定することが出来ます。そのため、案件に応じて柔軟な対応することができます。

また、ディレクトリの設定やファイルの設定をconfig.jsに持たせておくと、柔軟にフォルダ構造を変更ができます。タスクの値を必要に応じて外部に持たせるとより柔軟で誰でも使えるGruntfile.jsになると思います。

他にもGruntについて書いた記事もあるので、よかったらそちらも読んでみてください。

Recent Entries
MD EVENT REPORT
What's Hot?
株式会社MONSTER DIVE
タグリスト
カテゴリアーカイブ
作者別アーカイブ
年月別アーカイブ