Grunt.jsを触ってみた

$ brew upgrade node
$ node -v  // バージョン確認
v0.10.26

$ sudo npm install -g grunt-cli

$ npm completion >> ~/.zshrc
$ source .zshrc

$ cd プロジェクトディレクトリ
$ npm init

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "atsu666",
  "license": "ISC"
}

$ npm install grunt --save-dev
grunt@0.4.4 node_modules/grunt
├── which@1.0.5
├── dateformat@1.0.2-1.2.3
├── eventemitter2@0.4.13
├── getobject@0.1.0
├── rimraf@2.2.6
├── colors@0.6.2
├── grunt-legacy-util@0.1.2
├── hooker@0.2.3
├── async@0.1.22
├── exit@0.1.2
├── nopt@1.0.10 (abbrev@1.0.4)
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
├── iconv-lite@0.2.11
├── findup-sync@0.1.3 (glob@3.2.9, lodash@2.4.1)
└── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "atsu666",
  "license": "ISC",
  "devDependencies": { // ← Gruntのインストール情報が追記された
    "grunt": "^0.4.4"
  }
}

$ npm install grunt-contrib-watch grunt-contrib-cssmin --save-dev

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "atsu666",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-contrib-cssmin": "^0.9.0", // 追記された
    "grunt-contrib-watch": "^0.6.1" // 追記された
  }
}

$ npm install // package.jsonの情報を元にGruntやプラグインをインストール

module.exports = function(grunt) {
};

grunt.initConfig({
  cssmin: { // grunt-contrib-cssminの設定
    compress: {
      files: {
        './test.min.css': ['themes/xxx/css/*.css']
      }
    }
  },
  watch: { // grunt-contrib-watchの設定
    files: ['themes/xxx/css/*.css'],
    tasks: ['cssmin']
  }
});

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

$ grunt cssmin watch

grunt.registerTask('default', ['cssmin', 'watch']);

$ grunt // タスクを指定しなくても登録されているタスクが実行される

themes/**/css/*css
// themesディレクトリ以下のサブディレクトリにあるcssディレクトリ直下のcssファイル
// サブディレクトリは何回層でもいいので使えそうですね。

images/*.{gif,jpeg,jpg,png}
// {}を使ってOR条件でファイルの拡張子を指定しています。

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'), // package.jsonの読み込み
    cssmin: {
      compress: {
        files: {
          './<%= pkg.name %>.min.css': ['themes/**/*.css'] // <%= %>で変数を展開できる（パッケージ名をファイル名に指定）
        }
      }
    },
    watch: {
      files: ['themes/**/css/*.css'],
      tasks: ['cssmin']
    }
  });