animate.css gulp转grunt

由于项目采用grunt编译，要用到animate.css，但是它的源码又需要gulp。所以转换一下是必须的。

首先改造一下animate-config.json

1. 原始大概是这样的，gulp需要编译的话 去掉不需要的就行。

{

  "attention_seekers": [
    "bounce",
    "flash",
    "pulse",
    "rubberBand",
    "shake",
    "headShake",
    "swing",
    "tada",
    "wobble",
    "jello"
  ],...

2. 改造，我感觉去掉不需要的 下次想放开的话不方便。所以改造如下：

{
  "attention_seekers": [
    "bounce:1",
    "flash:0",
    "pulse:0",
    "rubberBand:0",
    "shake:1",
    "headShake:0",
    "swing:0",
    "tada:0",
    "wobble:0",
    "jello:0"
  ],

加一个开关，0表示关 1表示开。

接下来改造gunt配置文件

1. 在module.exports中添加 读取配置的函数，就像写js一样简单

//提取动画库中的配置
    function activateAnimations() {
      //读取配置文件
      var categories = JSON.parse(fs.readFileSync('animate-config.json')),
        category, files, file,
       //需要压缩合并的css，初始化就只有你自己项目的css和一个animate的_base.css
        target = ['src/css/*.css','src/animatecss/_base.css'],
        count = 0;
      for (category in categories) {
        if (categories.hasOwnProperty(category)) {
          files = categories[category];
         //循环配置文件，把开启的动画样式添加到target 中
          for (var i = 0; i < files.length; ++i) {
            if(files[i].split(":")[1] == 1){
              target.push('src/animatecss/' + category + '/' + files[i].split(":")[0]+ '.css');
              count += 1;
            }
          }
        }
      }

      if (!count) {
        console.log('No animations activated.');
      } else {
        console.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.');
      }
    //输出target 
    return target;
  }

2. 在合适的位置调用activateAnimations方法，一般马上执行就可以了

var basecss = activateAnimations() ;
//打印看看 是否正确
console.log(basecss) ;

3. 在js压缩合并的任务中 引用basecss 这个变量就可以了。

//css压缩合并
    cssmin: {
         options:{
            keepSpecialComments: 0
         }，
         default:{
            src: basecss,
            dest: 'dist/css/base.css'
         }
     }

到此结束-------------