gruntことはじめ

gistfile1.js

/*global module:false*/
module.exports = function(grunt) {
  grunt.initConfig({
  //ここから下に機能を分けて書くよ
  
  // ベンダープレフィックスをつける機能　autoprefixer -------------------------
    autoprefixer: {
      options: {
      },
      concat: {
        src: 'style/*.css',  // ここにあるcssファイル全部を
        dest: 'pre/pre.css'  // ここに合体させてプレフィックスをつけて保存
      }
    },

  // 改行など全部とっぱらう機能　csso -------------------------
    csso: {
      dist: {
        files: {
          'style.css': ['pre/pre.css']
        }
      }
    }
    
  // ここまでで機能の登録終わり -------------------------
  });
  
  

  // ここから上に書いた機能をGrantさんにロードしてもらうようにするよ
  grunt.loadNpmTasks('grunt-csso');
  grunt.loadNpmTasks('grunt-autoprefixer');


  // 続いて、grunt　とコマンドを叩いた時に行う振る舞いを書くよ
  // 下記の場合、grunt と打つとautoprefixerとcssoが一緒に動くよ
  grunt.registerTask('default', ['autoprefixer','csso']);
};

コレをやると元のファイルが

例えばグラデーションのCSSで

.boxA {
background-image: linear-gradient(to top left, red, blue);
}

だったとして、autoprefixerによって
.boxA {
background-image: -webkit-gradient(linear, right bottom, left top, from(red), to(blue));
background-image: -webkit-linear-gradient(bottom right, red, blue);
background-image: linear-gradient(to top left, red, blue);
}

という風にプレフィックスが勝手について

cssoによって
.boxA{background-image:-webkit-gradient(linear,right bottom,left top,from(red),to(#00f));background-image:-webkit-linear-gradient(bottom right,red,#00f);background-image:linear-gradient(to top left,red,#00f)}

という風に、最小化される。　なるほど！