gruntを試す

grunt用意

gruntはいろいろなタスクを自動化出来る便利なものらしい。
いきなり難しいことはしないで、taskを実行出来るところまで、
やってみました。

今回はgrunt-contrib-cssminを使って、
分割されたcssファイルを一つのファイルにまとめて見ようと思います。

Plugins - Grunt: The JavaScript Task Runner
ここにプラグインの一覧があるので、眺めてみると面白いかもしれません。

test_gruntをgruntを使うprojectとして用いる。

$ npm install -g grunt-cli
$ mkdir test_grunt
$ cd test_grunt
$ npm init
$ npm install grunt --save-dev
$ touch Gruntfile.js
$ npm install grunt-contrib-cssmin --save-dev

Gruntの設定ファイル、Gruntfile.jsを編集する。

Gruntfile.js

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    cssmin: {
      combine: {
        files: {
          'build/css/merge.css': ['src/css/app.css', 'src/css/sub.css']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  // Default task(s).
  grunt.registerTask('default', ['cssmin']);

};

上記で使うディレクトリーやファイルは、
あらかじめ作成しておかないとエラーが起きてしまった。
build/css/ src/css/ src/css/app.css src/css/sub.css
を作成して次のようなファイル構成にする。

.
├── Gruntfile.js
├── build
│   └── css
├── index.js
├── package.json
└── src
    └── css
        ├── app.css
        └── sub.css

ちなみに、app.cssとsub.cssは次のようなものです。

app.css

body{
  background-color: red;
}

sub.css

h1{
  background-color: white;
}

ここでgruntのタスクを実行する。

$ grunt cssmin

あるいは、default taskにcssminを指定してあるので、gruntだけでも実行できる。

$ grunt

実行するとbuild/css/merge.cssが作成される。

merge.css

body{background-color:red}h1{background-color:#fff}