Complete switch to Gulp

animate.css

@@ -1,13 +1,12 @@
 @charset "UTF-8";
 
 /*!
- * Animate.css -http://daneden.me/animate
+ * animate.css -http://daneden.me/animate
  * Version - 3.4.0
  * Licensed under the MIT license - http://opensource.org/licenses/MIT
  *
  * Copyright (c) 2015 Daniel Eden
  */
-
 .animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;

gulpfile.js

@@ -7,21 +7,68 @@ var gulp = require('gulp');
 // Gulp plugins
 var gutil  = require('gulp-util');
 var concat = require('gulp-concat');
+var header = require('gulp-header');
+var autoprefixer = require('gulp-autoprefixer');
+var runSequence = require('run-sequence');
+var minify = require('gulp-minify-css');
+var rename = require('gulp-rename');
 
 // Misc/global vars
 var pkg    = JSON.parse(fs.readFileSync('package.json'));
 var banner = [
+  '@charset "UTF-8";\n',
   '/*!',
   ' * <%= name %> -<%= homepage %>',
   ' * Version - <%= version %>',
   ' * Licensed under the MIT license - http://opensource.org/licenses/MIT',
   ' *',
   ' * Copyright (c) <%= new Date().getFullYear() %> <%= author.name %>',
-  ' */',
+  ' */\n\n'
 ].join('\n');
+var activatedAnimations = activateAnimations();
+
+// ----------------------------
+// Gulp task definitions
+// ----------------------------
+
+gulp.task('default', function() {
+  runSequence('concatCSS', 'addHeader', 'prefixes', 'minifyCSS');
+});
+
+gulp.task('concatCSS', function() {
+  return gulp.src(activatedAnimations)
+    .pipe(concat('animate.css'))
+    .pipe(gulp.dest('./'));
+});
+
+gulp.task('addHeader', function() {
+  return gulp.src('animate.css')
+    .pipe(header(banner, pkg))
+    .pipe(gulp.dest('./'));
+});
+
+gulp.task('prefixes', function() {
+  return gulp.src('animate.css')
+    .pipe(autoprefixer({
+      browsers: ['last 2 versions'],
+      cascade: false
+    }))
+    .pipe(gulp.dest('./'));
+});
+
+gulp.task('minifyCSS', function() {
+  return gulp.src('animate.css')
+    .pipe(rename('animate.min.css'))
+    .pipe(minify())
+    .pipe(gulp.dest('./'));
+});
+
+// ----------------------------
+// Helpers/functions
+// ----------------------------
 
 // Read the config file and return an array of the animations to be activated
-var activatedAnimations = function () {
+function activateAnimations() {
   var categories = JSON.parse(fs.readFileSync('animate-config.json')),
     category, files, file,
     target = [ 'source/_base.css' ],
@@ -48,13 +95,3 @@ var activatedAnimations = function () {
 
   return target;
 };
-
-gulp.task('default', function() {
-
-});
-
-gulp.task('concatCSS', function() {
-  return gulp.src(activatedAnimations)
-    .pipe(concat('animate.css'))
-    .pipe(gulp.dest('./'));
-});

package.json

@@ -21,12 +21,16 @@
   },
   "devDependencies": {
     "gulp": "^3.9.0",
-    "gulp-concat": "^2.6.0"
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-minify-css": "^1.2.2",
+    "run-sequence": "^1.1.5"
   },
   "spm": {
     "main": "./animate.css"
   },
   "dependencies": {
-    "gulp-header": "^1.7.1"
+    "gulp-header": "^1.7.1",
+    "gulp-rename": "^1.2.2"
   }
 }

source/_base.css

@@ -1,7 +1,3 @@
-@charset "UTF-8";
-
-/*! inject-banner */
-
 .animated {
   animation-duration: 1s;
   animation-fill-mode: both;
@@ -18,6 +14,6 @@
 .animated.flipOutX,
 .animated.flipOutY,
 .animated.bounceIn,
-.animated.bounceOut{
+.animated.bounceOut {
   animation-duration: .75s;
 }

source/attention_seekers/headShake.css

@@ -1,5 +1,5 @@
 @keyframes headShake {
-  0 {
+  0% {
     transform: translateX(0);
   }
 

source/attention_seekers/jello.css

@@ -32,7 +32,7 @@
   }
 }
 
-.jello{
-  animation-name:jello;
+.jello {
+  animation-name: jello;
   transform-origin: center;
 }