v0.3.1: use autoprefixer and minify css during build process

marekdedic · Mar 26, 2015 · 8e9bdb1 · 8e9bdb1
1 parent 8e1b1da
commit 8e9bdb1
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 127 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "imagelightbox",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Image Lightbox, Responsive and Touch‑friendly",
   "repository": "https://github.com/rejas/imagelightbox.git",
   "main": [

diff --git a/demo/demo.html b/demo/demo.html
@@ -10,7 +10,7 @@
     <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
 
     <link rel="stylesheet" href="demo.css">
-    <link rel="stylesheet" href="../imagelightbox.css">
+    <link rel="stylesheet" href="../dist/imagelightbox.min.css">
 </head>
 <body>
 

diff --git a/gulpfile.js b/gulpfile.js
@@ -1,27 +1,40 @@
-var gulp    = require('gulp');
-var csslint = require('gulp-csslint');
-var jshint  = require('gulp-jshint');
-var rename  = require('gulp-rename');
-var uglify  = require('gulp-uglify');
-var stylish = require('jshint-stylish');
+var gulp            = require('gulp'),
+    csslint         = require('gulp-csslint'),
+    jshint          = require('gulp-jshint'),
+    rename          = require('gulp-rename'),
+    uglify          = require('gulp-uglify'),
+    autoprefixer    = require('gulp-autoprefixer'),
+    minifyCSS       = require('gulp-minify-css'),
+    stylish         = require('jshint-stylish');
 
 gulp.task('csslint', function () {
     return gulp.src('imagelightbox.css')
         .pipe(csslint('.csslintrc'))
         .pipe(csslint.reporter())
 });
 
+gulp.task('minify:css', function () {
+    return gulp.src('imagelightbox.css')
+        .pipe(autoprefixer({
+            browsers: ['last 2 versions', 'ie >= 7', 'Firefox ESR', 'Android >= 2.3'],
+            cascade: false
+        }))
+        .pipe(minifyCSS())
+        .pipe(rename('imagelightbox.min.css'))
+        .pipe(gulp.dest('dist/'));
+});
+
 gulp.task('jshint', function () {
     return gulp.src('imagelightbox.js')
         .pipe(jshint())
         .pipe(jshint.reporter(stylish));
 });
 
-gulp.task('minify', function () {
+gulp.task('minify:js', function () {
     return gulp.src('imagelightbox.js')
         .pipe(uglify())
         .pipe(rename('imagelightbox.min.js'))
         .pipe(gulp.dest('dist/'));
 });
 
-gulp.task('default', ['csslint', 'jshint', 'minify']);
+gulp.task('default', ['csslint', 'minify:css', 'jshint', 'minify:js']);
diff --git a/imagelightbox.css b/imagelightbox.css
@@ -4,21 +4,14 @@
     cursor: pointer;
     position: fixed;
     z-index: 10000;
-
-    -ms-touch-action: none;
     touch-action: none;
-
-    -webkit-box-shadow: 0 0 3.125em rgba(0, 0, 0, .75); /* 50 */
-    -moz-box-shadow: 0 0 3.125em rgba(0, 0, 0, .75); /* 50 */
     box-shadow: 0 0 3.125em rgba(0, 0, 0, .75); /* 50 */
 }
 
 /* WITH ACTIVITY INDICATION */
 
 #imagelightbox-loading,
 #imagelightbox-loading div {
-    -webkit-border-radius: 9999px;
-    -moz-border-radius: 9999px;
     border-radius: 9999px;
 }
 
@@ -31,68 +24,16 @@
     left: 50%;
     padding: 0.65em;
     margin: -1.3em 0 0 -1.3em;
-
-    -webkit-box-shadow: 0 0 2.5em rgba(0, 0, 0, .75); /* 40 */
-    -moz-box-shadow: 0 0 2.5em rgba(0, 0, 0, .75); /* 40 */
     box-shadow: 0 0 2.5em rgba(0, 0, 0, .75); /* 40 */
 }
 
 #imagelightbox-loading div {
     width: 1.3em;
     height: 1.3em;
     background-color: #fff;
-
-    -webkit-animation: imagelightbox-loading .5s ease infinite;
-    -moz-animation: imagelightbox-loading .5s ease infinite;
-    -o-animation: imagelightbox-loading .5s ease infinite;
     animation: imagelightbox-loading .5s ease infinite;
 }
 
-@-webkit-keyframes imagelightbox-loading {
-    from {
-        opacity: .5;
-        -webkit-transform: scale(.75);
-    }
-    50% {
-        opacity: 1;
-        -webkit-transform: scale(1);
-    }
-    to {
-        opacity: .5;
-        -webkit-transform: scale(.75);
-    }
-}
-
-@-moz-keyframes imagelightbox-loading {
-    from {
-        opacity: .5;
-        -moz-transform: scale(.75);
-    }
-    50% {
-        opacity: 1;
-        -moz-transform: scale(1);
-    }
-    to {
-        opacity: .5;
-        -moz-transform: scale(.75);
-    }
-}
-
-@-o-keyframes imagelightbox-loading {
-    from {
-        opacity: .5;
-        -o-transform: scale(.75);
-    }
-    50% {
-        opacity: 1;
-        -o-transform: scale(1);
-    }
-    to {
-        opacity: .5;
-        -o-transform: scale(.75);
-    }
-}
-
 @keyframes imagelightbox-loading {
     from {
         opacity: .5;
@@ -131,15 +72,7 @@
     z-index: 10002;
     top: 2.5em; /* 40 */
     right: 2.5em; /* 40 */
-
-    -webkit-border-radius: 50%;
-    -moz-border-radius: 50%;
     border-radius: 50%;
-
-    -webkit-transition: color .3s ease;
-    -moz-transition: color .3s ease;
-    -ms-transition: color .3s ease;
-    -o-transition: color .3s ease;
     transition: color .3s ease;
 }
 
@@ -160,18 +93,10 @@
 }
 
 #imagelightbox-close:before {
-    -webkit-transform: rotate(45deg);
-    -moz-transform: rotate(45deg);
-    -ms-transform: rotate(45deg);
-    -o-transform: rotate(45deg);
     transform: rotate(45deg);
 }
 
 #imagelightbox-close:after {
-    -webkit-transform: rotate(-45deg);
-    -moz-transform: rotate(-45deg);
-    -ms-transform: rotate(-45deg);
-    -o-transform: rotate(-45deg);
     transform: rotate(-45deg);
 }
 
@@ -199,15 +124,7 @@
     left: 50%;
     bottom: 3.75em; /* 60 */
     padding: 0.313em; /* 5 */
-
-    -webkit-transform: translateX(-50%);
-    -moz-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    -o-transform: translateX(-50%);
     transform: translateX(-50%);
-
-    -webkit-border-radius: 20px;
-    -moz-border-radius: 20px;
     border-radius: 20px;
 }
 
@@ -217,9 +134,6 @@
     border: 1px solid #fff;
     display: inline-block;
     margin: 0 0.313em; /* 5 */
-
-    -webkit-border-radius: 50%;
-    -moz-border-radius: 50%;
     border-radius: 50%;
 }
 
@@ -232,39 +146,9 @@
 #imagelightbox-close,
 #imagelightbox-caption,
 #imagelightbox-nav {
-    -webkit-animation: fade-in .25s linear;
-    -moz-animation: fade-in .25s linear;
-    -o-animation: fade-in .25s linear;
     animation: fade-in .25s linear;
 }
 
-@-webkit-keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@-moz-keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@-o-keyframes fade-in {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
 @keyframes fade-in {
     from {
         opacity: 0;

diff --git a/package.json b/package.json
@@ -1,12 +1,14 @@
 {
   "name": "imagelightbox",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Image Lightbox, Responsive and Touch‑friendly",
   "repository": "https://github.com/rejas/imagelightbox.git",
   "devDependencies": {
     "gulp": "^3.8.11",
+    "gulp-autoprefixer": "^2.1.0",
     "gulp-csslint": "^0.1.5",
     "gulp-jshint": "^1.9.4",
+    "gulp-minify-css": "^1.0.0",
     "gulp-rename": "^1.2.0",
     "gulp-uglify": "^0.2.1",
     "jshint-stylish": "^0.1.5"