Gruntfile.js作成

compassでsassのコンパイル・スプライト画像生成の続きです。

目次

1. Grunt+Compassでフロント環境構築【導入編】
2. compassでsassのコンパイル・スプライト画像生成
3. Gruntfile.js作成

環境構築

前述の1を実行時点でgruntコマンド、package.jsonが作成されている。

・gruntインストール
npm install -g grunt-cli
・package.json生成。選択は全てエンターで大丈夫です。
npm init
・グラントファイルを使用するプロジェクトのルート上で下記を実行
npm install grunt --save-dev

・使用するnode-moduleをインストール

Gruntfileで使用するnode-moduleをプロジェクトルートディレクトリ上でインストール
下記moduleを使用してconcat,uglify等を行う。
前回記載したcompassもこのモジュールを使用し管理する。

npm install grunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglify grunt-contrib-watch grunt-contrib-concat grunt-contrib-cssmin grunt-contrib-compass grunt-contrib-handlebars --save-dev


Gruntfile作成

ルートディレクトリ上でGruntfile.jsを作成
vim Gruntfile.js

モジュールの設定

下記はインストールしたモジュールの設定例
Gruntfile.jsのinigConfig内で設定
必要に応じてconcat(結合), uglify(jsの圧縮),copy,rename,cleanなどを設定追加する。

Gruntfile.js

module.exports = function(grunt){
  grunt.initConfig({
    root_dir: './src/main/webapp',
    pkg:grunt.file.readJSON("package.json"),

    compass: {
      dev: {
        options : {
          config : 'config.rb',
          environment : 'development',
        }
      },
      prod: {
        options : {
          config : 'config.rb',
          environment : 'production'
        }
      }
    },
　  cssmin:{//ミニファイ
      minify:{
        src:[
             '<%= root_dir %>/css/component/*.css',
             '<%= root_dir %>/css/utility/*.css',
             '<%= root_dir %>/css/project/*.css'
             ],
        dest: '<%= root_dir %>/css/all.min.css'     
      }
    },
    //省略 concat(結合), uglify(jsの圧縮)も同様に作成する

  });
}

watchタスク追加

watchタスクとは
上記で設定したモジュールの動きを制御する。
ローカル環境等でファイル変更時(保存時)に自動で設定したタスクを実行する。
Gruntfile.jsのinigConfig内で設定
階層は他のcssmin等と同様

Gruntfile.js

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

    //*************compass,cssmin等モジュール設定略************

    watch:{
      js: {
        files: [
                '<%= root_dir %>/js/**/*.js',
                '<%= root_dir %>/js/**/*.setting'
                ],
        tasks: ['concat', 'uglify'] // 実行させるタスク
      },
      scss:{
        files: [
                '<%= root_dir %>/scss/**/*.scss',
                ],
        tasks: [
                'compass:dev'
                ]
      },
      css : {
        files: [
                '<%= root_dir %>/css/**/*.css'
                ],
        tasks: [
                'cssmin'
                ] // 実行させるタスク
      }
    }
  });

}

タスク設定

各環境(local,dev,本番等)で実行したいタスクを設定する。
下記はdevではconcat,uglifyなどは行わずdevでのみ実行している。

jenkins等デプロイ時にタスクを実行することも可能です。
Gruntfile.jsのinigConfig外で設定

Gruntfile.js

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

   //cssmin,watch等モジュール設定略

  });

  grunt.registerTask('dev_watch', ['compass:dev', 'watch']);

  grunt.registerTask('prd', ['compass:prd', 'concat', 'cssmin', 'uglify']);
}