Add autoprefixer task to gulpfile.js

dist/vegas.css

@@ -28,8 +28,10 @@
         width: 0%;
         height: 100%;
         background: yellowgreen;
-        transition-property: width;
-        transition-timing-function: ease-out;
+        -webkit-transition-property: width;
+                transition-property: width;
+        -webkit-transition-timing-function: ease-out;
+                transition-timing-function: ease-out;
     }
         .vegas-timer-running .vegas-timer-progress {
             width: 100%;
@@ -77,16 +79,19 @@ body.vegas-container {
 
 .vegas-transition-slideLeft {
     -webkit-transform: translateX(100%);
+        -ms-transform: translateX(100%);
             transform: translateX(100%);
 }
 
 .vegas-transition-slideLeft-in {
-     -webkit-transform: translateX(0%);
-             transform: translateX(0%); 
+    -webkit-transform: translateX(0%);
+        -ms-transform: translateX(0%);
+            transform: translateX(0%); 
 }
 
 .vegas-transition-slideLeft-out {
     -webkit-transform: translateX(-100%);
+        -ms-transform: translateX(-100%);
             transform: translateX(-100%);
 }
 
@@ -94,16 +99,19 @@ body.vegas-container {
 
 .vegas-transition-slideRight {
     -webkit-transform: translateX(-100%);
+        -ms-transform: translateX(-100%);
             transform: translateX(-100%);
 }
 
 .vegas-transition-slideRight-in {
-     -webkit-transform: translateX(0%);
-             transform: translateX(0%); 
+    -webkit-transform: translateX(0%);
+        -ms-transform: translateX(0%);
+            transform: translateX(0%); 
 }
 
 .vegas-transition-slideRight-out {
     -webkit-transform: translateX(100%);
+        -ms-transform: translateX(100%);
             transform: translateX(100%);
 }
 
@@ -111,16 +119,19 @@ body.vegas-container {
 
 .vegas-transition-slideUp {
     -webkit-transform: translateY(100%);
+        -ms-transform: translateY(100%);
             transform: translateY(100%);
 }
 
 .vegas-transition-slideUp-in {
-     -webkit-transform: translateY(0%);
-             transform: translateY(0%); 
+    -webkit-transform: translateY(0%);
+        -ms-transform: translateY(0%);
+            transform: translateY(0%); 
 }
 
 .vegas-transition-slideUp-out {
     -webkit-transform: translateY(-100%);
+        -ms-transform: translateY(-100%);
             transform: translateY(-100%);
 }
 
@@ -128,16 +139,19 @@ body.vegas-container {
 
 .vegas-transition-slideDown {
     -webkit-transform: translateY(-100%);
+        -ms-transform: translateY(-100%);
             transform: translateY(-100%);
 }
 
 .vegas-transition-slideDown-in {
-     -webkit-transform: translateY(0%);
-             transform: translateY(0%); 
+    -webkit-transform: translateY(0%);
+        -ms-transform: translateY(0%);
+            transform: translateY(0%); 
 }
 
 .vegas-transition-slideDown-out {
     -webkit-transform: translateY(100%);
+        -ms-transform: translateY(100%);
             transform: translateY(100%);
 }
 
@@ -145,18 +159,21 @@ body.vegas-container {
 
 .vegas-transition-zoomIn {
     -webkit-transform: scale(0);
+        -ms-transform: scale(0);
             transform: scale(0);
     opacity: 0;
 }
 
 .vegas-transition-zoomIn-in {
     -webkit-transform: scale(1);
+        -ms-transform: scale(1);
             transform: scale(1);
     opacity: 1;
 }
 
 .vegas-transition-zoomIn-out {
     -webkit-transform: scale(2);
+        -ms-transform: scale(2);
             transform: scale(2);
     opacity: 0;
 }
@@ -165,18 +182,21 @@ body.vegas-container {
 
 .vegas-transition-zoomOut {
     -webkit-transform: scale(2);
+        -ms-transform: scale(2);
             transform: scale(2);
     opacity: 0;
 }
 
 .vegas-transition-zoomOut-in {
     -webkit-transform: scale(1);
+        -ms-transform: scale(1);
             transform: scale(1);
     opacity: 1;
 }
 
 .vegas-transition-zoomOut-out {
     -webkit-transform: scale(0);
+        -ms-transform: scale(0);
             transform: scale(0);
     opacity: 0;
 }
@@ -185,18 +205,21 @@ body.vegas-container {
 
 .vegas-transition-swirlLeft {
     -webkit-transform: scale(2) rotate(35deg);
+        -ms-transform: scale(2) rotate(35deg);
             transform: scale(2) rotate(35deg);
     opacity: 0;
 }
 
 .vegas-transition-swirlLeft-in {
-     -webkit-transform: scale(1) rotate(0deg);
-             transform: scale(1) rotate(0deg); 
+    -webkit-transform: scale(1) rotate(0deg);
+        -ms-transform: scale(1) rotate(0deg);
+            transform: scale(1) rotate(0deg); 
     opacity: 1;
 }
 
 .vegas-transition-swirlLeft-out {
     -webkit-transform: scale(2) rotate(-35deg);
+        -ms-transform: scale(2) rotate(-35deg);
             transform: scale(2) rotate(-35deg);
     opacity: 0;
 }
@@ -205,18 +228,21 @@ body.vegas-container {
 
 .vegas-transition-swirlRight {
     -webkit-transform: scale(2) rotate(-35deg);
+        -ms-transform: scale(2) rotate(-35deg);
             transform: scale(2) rotate(-35deg);
     opacity: 0;
 }
 
 .vegas-transition-swirlRight-in {
-     -webkit-transform: scale(1) rotate(0deg);
-             transform: scale(1) rotate(0deg);
+    -webkit-transform: scale(1) rotate(0deg);
+        -ms-transform: scale(1) rotate(0deg);
+            transform: scale(1) rotate(0deg);
     opacity: 1;
 }
 
 .vegas-transition-swirlRight-out {
     -webkit-transform: scale(2) rotate(35deg);
+        -ms-transform: scale(2) rotate(35deg);
             transform: scale(2) rotate(35deg);
     opacity: 0;
 }

dist/vegas.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Vegas - Fullscreen Backgrounds and Slideshows.
- * v2.0.0-wip - built 2015-01-14
+ * v2.0.0-wip - built 2015-01-15
  * Licensed under the MIT License.
  * http://vegas.jaysalvat.com/
  * ----------------------------------------------------------------------------

dist/vegas.min.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Vegas - Fullscreen Backgrounds and Slideshows.
- * v2.0.0-wip - built 2015-01-14
+ * v2.0.0-wip - built 2015-01-15
  * Licensed under the MIT License.
  * http://vegas.jaysalvat.com/
  * ----------------------------------------------------------------------------

gulpfile.js

@@ -14,6 +14,7 @@
         bump      = require('gulp-bump'),
         header    = require('gulp-header'),
         cssmin    = require('gulp-cssmin'),
+        prefixer  = require('gulp-autoprefixer'),
         uglify    = require('gulp-uglify'),
         sourcemap = require('gulp-sourcemaps'),
         jshint    = require('gulp-jshint'),
@@ -176,6 +177,12 @@
             .pipe(gulp.dest('./dist'));
     });
 
+    gulp.task('autoprefixer', function () {
+        return gulp.src('./dist/**/*.css')
+            .pipe(prefixer())
+            .pipe(gulp.dest('./dist'));
+    });
+
     gulp.task('uglify', function () {
         return gulp.src('./dist/**/!(*.min.js).js')
             .pipe(rename({ suffix: '.min' }))
@@ -193,6 +200,7 @@
 
     gulp.task('cssmin', function () {
         return gulp.src('./dist/**/!(*.min.css).css')
+            .pipe(prefixer())
             .pipe(rename({ suffix: '.min' }))
             .pipe(cssmin())
             .pipe(gulp.dest('./dist/'));
@@ -235,6 +243,7 @@
         'lint',
         'clean', 
         'copy', 
+        'autoprefixer',
         'uglify',
         'cssmin',
         'header'
@@ -248,6 +257,7 @@
         'license',
         'clean',
         'copy',
+        'autoprefixer',
         'uglify',
         'cssmin',
         'header',
@@ -284,6 +294,7 @@ npm install --save-dev gulp
 npm install --save-dev gulp-bump
 npm install --save-dev gulp-header
 npm install --save-dev gulp-cssmin
+npm install --save-dev gulp-autoprefixer
 npm install --save-dev gulp-uglify
 npm install --save-dev gulp-sourcemaps
 npm install --save-dev gulp-jshint

package.json

@@ -27,6 +27,7 @@
     "exec": "^0.1.3",
     "fs": "0.0.2",
     "gulp": "^3.8.10",
+    "gulp-autoprefixer": "^2.1.0",
     "gulp-bump": "^0.1.11",
     "gulp-cssmin": "^0.1.6",
     "gulp-header": "^1.2.2",

src/vegas.css

@@ -38,8 +38,7 @@
 .vegas-slide {
     padding: 0;
     background: transparent center center no-repeat;
-    -webkit-transform: translateZ(0);
-            transform: translateZ(0);
+    transform: translateZ(0);
 }
 
 body.vegas-container {
@@ -76,147 +75,123 @@ body.vegas-container {
 /* slideLeft */
 
 .vegas-transition-slideLeft {
-    -webkit-transform: translateX(100%);
-            transform: translateX(100%);
+    transform: translateX(100%);
 }
 
 .vegas-transition-slideLeft-in {
-     -webkit-transform: translateX(0%);
-             transform: translateX(0%); 
+    transform: translateX(0%); 
 }
 
 .vegas-transition-slideLeft-out {
-    -webkit-transform: translateX(-100%);
-            transform: translateX(-100%);
+    transform: translateX(-100%);
 }
 
 /* slideRight */
 
 .vegas-transition-slideRight {
-    -webkit-transform: translateX(-100%);
-            transform: translateX(-100%);
+    transform: translateX(-100%);
 }
 
 .vegas-transition-slideRight-in {
-     -webkit-transform: translateX(0%);
-             transform: translateX(0%); 
+    transform: translateX(0%); 
 }
 
 .vegas-transition-slideRight-out {
-    -webkit-transform: translateX(100%);
-            transform: translateX(100%);
+    transform: translateX(100%);
 }
 
 /* slideUp */
 
 .vegas-transition-slideUp {
-    -webkit-transform: translateY(100%);
-            transform: translateY(100%);
+    transform: translateY(100%);
 }
 
 .vegas-transition-slideUp-in {
-     -webkit-transform: translateY(0%);
-             transform: translateY(0%); 
+    transform: translateY(0%); 
 }
 
 .vegas-transition-slideUp-out {
-    -webkit-transform: translateY(-100%);
-            transform: translateY(-100%);
+    transform: translateY(-100%);
 }
 
 /* slideDown */
 
 .vegas-transition-slideDown {
-    -webkit-transform: translateY(-100%);
-            transform: translateY(-100%);
+    transform: translateY(-100%);
 }
 
 .vegas-transition-slideDown-in {
-     -webkit-transform: translateY(0%);
-             transform: translateY(0%); 
+    transform: translateY(0%); 
 }
 
 .vegas-transition-slideDown-out {
-    -webkit-transform: translateY(100%);
-            transform: translateY(100%);
+    transform: translateY(100%);
 }
 
 /* zoomIn */
 
 .vegas-transition-zoomIn {
-    -webkit-transform: scale(0);
-            transform: scale(0);
+    transform: scale(0);
     opacity: 0;
 }
 
 .vegas-transition-zoomIn-in {
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    transform: scale(1);
     opacity: 1;
 }
 
 .vegas-transition-zoomIn-out {
-    -webkit-transform: scale(2);
-            transform: scale(2);
+    transform: scale(2);
     opacity: 0;
 }
 
 /* zoomOut */
 
 .vegas-transition-zoomOut {
-    -webkit-transform: scale(2);
-            transform: scale(2);
+    transform: scale(2);
     opacity: 0;
 }
 
 .vegas-transition-zoomOut-in {
-    -webkit-transform: scale(1);
-            transform: scale(1);
+    transform: scale(1);
     opacity: 1;
 }
 
 .vegas-transition-zoomOut-out {
-    -webkit-transform: scale(0);
-            transform: scale(0);
+    transform: scale(0);
     opacity: 0;
 }
 
 /* swirlLeft */
 
 .vegas-transition-swirlLeft {
-    -webkit-transform: scale(2) rotate(35deg);
-            transform: scale(2) rotate(35deg);
+    transform: scale(2) rotate(35deg);
     opacity: 0;
 }
 
 .vegas-transition-swirlLeft-in {
-     -webkit-transform: scale(1) rotate(0deg);
-             transform: scale(1) rotate(0deg); 
+    transform: scale(1) rotate(0deg); 
     opacity: 1;
 }
 
 .vegas-transition-swirlLeft-out {
-    -webkit-transform: scale(2) rotate(-35deg);
-            transform: scale(2) rotate(-35deg);
+    transform: scale(2) rotate(-35deg);
     opacity: 0;
 }
 
 /* swirlRight */
 
 .vegas-transition-swirlRight {
-    -webkit-transform: scale(2) rotate(-35deg);
-            transform: scale(2) rotate(-35deg);
+    transform: scale(2) rotate(-35deg);
     opacity: 0;
 }
 
 .vegas-transition-swirlRight-in {
-     -webkit-transform: scale(1) rotate(0deg);
-             transform: scale(1) rotate(0deg);
+    transform: scale(1) rotate(0deg);
     opacity: 1;
 }
 
 .vegas-transition-swirlRight-out {
-    -webkit-transform: scale(2) rotate(35deg);
-            transform: scale(2) rotate(35deg);
+    transform: scale(2) rotate(35deg);
     opacity: 0;
 }