Gruntの使い方：タスクを実行させる

前回の続きです。
コマンドプロンプトを package.json のあるプロジェクトフォルダへ移動しておいてください。

まずプロジェクトフォルダ内が下記の構成になるようCSS用フォルダとファイルを用意してください。

project
├css
│├reset.css
│└style.css
├node_modules
└package.json

用意ができたら package.json と同じフォルダに Gruntfile.js を作成してください。
内容は下記の記述としてください。

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

 });
};

前回インストールしたプラグインより「grunt-contrib-cssmin」を使ってみます。
Gruntfile.jsに下記のように追記してください。

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

  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
};

追記した「loadNpmTasks」でプラグインの読み込みを行います。
次にgrunt.initConfig の中にタスクを書きます。

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          './css/min.css':['css/reset.css','css/style.css']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-cssmin');
};

設定を保存したらコマンドプロンプトで下記のコマンドを入力してください。

grunt cssmin

grunt.initConfigに記述した「cssmin」のタスクが実行され、CSSフォルダ内に reset.css と style.css が圧縮結合された min.css が生成されます。

このままでは圧縮結合に毎回コマンドを打つ必要がありますので、次回は自動化を行います。