Merge pull request #507 from daneden/gulp

Switch from Grunt to Gulp
animate-css · Dec 14, 2015 · 0a6a8ab · 0a6a8ab
2 parents 069a87f + 14402f2
commit 0a6a8ab
Show file tree

Hide file tree

Showing 8 changed files with 115 additions and 131 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
diff --git a/animate.css b/animate.css
@@ -1,8 +1,8 @@
 @charset "UTF-8";
 
 /*!
- * Animate.css -http://daneden.me/animate
- * Version - 3.4.0
+ * animate.css -http://daneden.me/animate
+ * Version - 3.5.0
  * Licensed under the MIT license - http://opensource.org/licenses/MIT
  *
  * Copyright (c) 2015 Daniel Eden

diff --git a/animate.min.css b/animate.min.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,97 @@
+// Utilities
+var fs = require('fs');
+
+// Gulp
+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
+function activateAnimations() {
+  var categories = JSON.parse(fs.readFileSync('animate-config.json')),
+    category, files, file,
+    target = [ 'source/_base.css' ],
+    count = 0;
+
+  for (category in categories) {
+    if (categories.hasOwnProperty(category)) {
+      files = categories[category];
+
+      for (file in files) {
+        if (files.hasOwnProperty(file) && files[file]) {
+          target.push('source/' + category + '/' + file + '.css');
+          count += 1;
+        }
+      }
+    }
+  }
+
+  if (!count) {
+    gutil.log('No animations activated.');
+  } else {
+    gutil.log(count + (count > 1 ? ' animations' : ' animation') + ' activated.');
+  }
+
+  return target;
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "animate.css",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "main": "animate.css",
   "repository": {
     "type": "git",
@@ -20,13 +20,13 @@
     }
   },
   "devDependencies": {
-    "grunt": "~0.4.1",
-    "grunt-autoprefixer": "~0.4.0",
-    "grunt-contrib-watch": "~0.5.3",
-    "grunt-banner": "~0.6.0",
-    "grunt-contrib-concat": "~0.3.0",
-    "grunt-contrib-cssmin": "~0.8.0",
-    "load-grunt-tasks": "~0.2.0"
+    "gulp": "^3.9.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-concat": "^2.6.0",
+    "gulp-minify-css": "^1.2.2",
+    "gulp-header": "^1.7.1",
+    "gulp-rename": "^1.2.2",
+    "run-sequence": "^1.1.5"
   },
   "spm": {
     "main": "./animate.css"

diff --git a/source/_base.css b/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;
 }
diff --git a/source/attention_seekers/headShake.css b/source/attention_seekers/headShake.css
@@ -1,5 +1,5 @@
 @keyframes headShake {
-  0 {
+  0% {
     transform: translateX(0);
   }
 

diff --git a/source/attention_seekers/jello.css b/source/attention_seekers/jello.css
@@ -32,7 +32,7 @@
   }
 }
 
-.jello{
-  animation-name:jello;
+.jello {
+  animation-name: jello;
   transform-origin: center;
 }