angular-flip-clock - npm Package Compare versions

Comparing version 0.2.0 to 0.3.0

bower.json

 {
   "name": "angular-flip-clock",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "homepage": "https://github.com/dmytroyarmak/angular-flip-clock",
@@ -5,0 +5,0 @@ "authors": [

dist/angular-flip-clock.full.js

@@ -178,3 +178,3 @@ (function() {
   $templateCache.put('src/js/angular-flip-clock-directive/angular-flip-clock-directive.html',
-    '<div class="flip-counter clock flip-clock-wrapper">\n' +
+    '<div class="dy-flip-clock">\n' +
     '  <dy-flip-clock-label text="Hours" hide-divider="true"></dy-flip-clock-label>\n' +
@@ -198,6 +198,6 @@ '  <dy-flip-clock-number value="vm.getHoursTensPlace()"></dy-flip-clock-number>\n' +
   $templateCache.put('src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html',
-    '<span class="flip-clock-divider" ng-class="{\'flip-clock-divider-hidden\': !!vm.hideDivider}">\n' +
-    '  <span class="flip-clock-label">{{vm.text}}</span>\n' +
-    '  <span class="flip-clock-dot top"></span>\n' +
-    '  <span class="flip-clock-dot bottom"></span>\n' +
+    '<span class="dy-flip-clock-divider" ng-class="{\'dy-flip-clock-divider-hidden\': !!vm.hideDivider}">\n' +
+    '  <span class="dy-flip-clock-label">{{vm.text}}</span>\n' +
+    '  <span class="dy-flip-clock-dot dy-flip-clock-dot-top"></span>\n' +
+    '  <span class="dy-flip-clock-dot dy-flip-clock-dot-bottom"></span>\n' +
     '</span>\n' +
@@ -209,17 +209,18 @@ '');
   $templateCache.put('src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html',
-    '<ul class="flip" ng-class="{\'play\': vm.isAnimated()}">\n' +
+    '<ul class="dy-flip-clock-number" ng-class="{\'dy-flip-clock-number-animated\': vm.isAnimated()}">\n' +
     '  <li\n' +
     '    ng-repeat="number in ::vm.numbers"\n' +
-    '    ng-class="{\'flip-clock-active\': vm.isActive(number), \'flip-clock-before\': vm.isBefore(number)}"\n' +
+    '    class="dy-flip-clock-number-digit"\n' +
+    '    ng-class="{\'dy-flip-clock-number-digit-active\': vm.isActive(number), \'dy-flip-clock-number-digit-before\': vm.isBefore(number)}"\n' +
     '  >\n' +
-    '    <a href="#">\n' +
-    '      <div class="up">\n' +
-    '        <div class="shadow"></div>\n' +
-    '        <div class="inn">{{::number}}</div>\n' +
+    '    <div class="dy-flip-clock-card">\n' +
+    '      <div class="dy-flip-clock-card-up">\n' +
+    '        <div class="dy-flip-clock-card-shadow"></div>\n' +
+    '        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-up">{{::number}}</div>\n' +
     '      </div>\n' +
-    '      <div class="down">\n' +
-    '        <div class="shadow"></div>\n' +
-    '        <div class="inn">{{::number}}</div>\n' +
+    '      <div class="dy-flip-clock-card-down">\n' +
+    '        <div class="dy-flip-clock-card-shadow"></div>\n' +
+    '        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-down">{{::number}}</div>\n' +
     '      </div>\n' +
-    '    </a>\n' +
+    '    </div>\n' +
     '  </li>\n' +
@@ -226,0 +227,0 @@ '</ul>\n' +

dist/angular-flip-clock.full.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";function l(){return{restrict:"EA",scope:{time:"="},bindToController:!0,controller:"DyFlipClockController",controllerAs:"vm",templateUrl:"src/js/angular-flip-clock-directive/angular-flip-clock-directive.html"}}function e(l){function e(){return d(o(b.time))}function n(){return p(o(b.time))}function c(){return d(u(b.time))}function i(){return p(u(b.time))}function r(){return d(a(b.time))}function t(){return p(a(b.time))}function o(l){return Math.floor((l%k-u(l))/m)}function u(l){return Math.floor((l%m-a(l))/v)}function a(l){return Math.floor((l%v-s(l))/f)}function s(l){return Math.floor(l%f)}function d(l){return(l%100-p(l))/10}function p(l){return l%10}var f=1e3,v=60*f,m=60*v,k=24*m,b=this;b.time=0,b.getHoursTensPlace=e,b.getHoursOnesPlace=n,b.getMinutesTensPlace=c,b.getMinutesOnesPlace=i,b.getSecondsTensPlace=r,b.getSecondsOnesPlace=t}function n(){return{restrict:"EA",scope:{text:"@",hideDivider:"="},bindToController:!0,controller:"DyFlipClockLabelController",controllerAs:"vm",templateUrl:"src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html"}}function c(){}function i(){return{restrict:"EA",scope:{},bindToController:!0,controllerAs:"vm",controller:"DyFlipClockNumberController",templateUrl:"src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html"}}function r(l,e,n){function c(){l.$watch(function(){return e(n.value)(l.$parent)},function(l,e){o.currentValue=l,o.previousValue=e})}function i(l){return o.currentValue===l}function r(l){return o.previousValue!==o.currentValue&&l===o.previousValue}function t(){return o.previousValue!==o.currentValue}var o=this;o.numbers=[0,1,2,3,4,5,6,7,8,9],o.currentValue=0,o.previousValue=0,o.isActive=i,o.isBefore=r,o.isAnimated=t,c()}angular.module("dyFlipClock",["dyFlipClock.dyFlipClockDirective","dyFlipClock.dyFlipClockNumberDirective","dyFlipClock.dyFlipClockLabelDirective"]),angular.module("dyFlipClock.dyFlipClockDirective",["dyFlipClock.dyFlipClockNumberDirective","dyFlipClock.dyFlipClockLabelDirective"]).directive("dyFlipClock",l).controller("DyFlipClockController",e),l.$inject=[],e.$inject=["$interval"],angular.module("dyFlipClock.dyFlipClockLabelDirective",[]).directive("dyFlipClockLabel",n).controller("DyFlipClockLabelController",c),n.$inject=[],c.$inject=[],angular.module("dyFlipClock.dyFlipClockNumberDirective",[]).directive("dyFlipClockNumber",i).controller("DyFlipClockNumberController",r),i.$inject=[],r.$inject=["$scope","$parse","$attrs"],angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-directive/angular-flip-clock-directive.html",'<div class="flip-counter clock flip-clock-wrapper">\n  <dy-flip-clock-label text="Hours" hide-divider="true"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getHoursTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getHoursOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Minutes"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getMinutesTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getMinutesOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Seconds"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getSecondsTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getSecondsOnesPlace()"></dy-flip-clock-number>\n  </ul>\n</div>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html",'<span class="flip-clock-divider" ng-class="{\'flip-clock-divider-hidden\': !!vm.hideDivider}">\n  <span class="flip-clock-label">{{vm.text}}</span>\n  <span class="flip-clock-dot top"></span>\n  <span class="flip-clock-dot bottom"></span>\n</span>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html",'<ul class="flip" ng-class="{\'play\': vm.isAnimated()}">\n  <li\n    ng-repeat="number in ::vm.numbers"\n    ng-class="{\'flip-clock-active\': vm.isActive(number), \'flip-clock-before\': vm.isBefore(number)}"\n  >\n    <a href="#">\n      <div class="up">\n        <div class="shadow"></div>\n        <div class="inn">{{::number}}</div>\n      </div>\n      <div class="down">\n        <div class="shadow"></div>\n        <div class="inn">{{::number}}</div>\n      </div>\n    </a>\n  </li>\n</ul>\n')}])}();
+!function(){"use strict";function l(){return{restrict:"EA",scope:{time:"="},bindToController:!0,controller:"DyFlipClockController",controllerAs:"vm",templateUrl:"src/js/angular-flip-clock-directive/angular-flip-clock-directive.html"}}function e(l){function e(){return p(t(y.time))}function c(){return s(t(y.time))}function i(){return p(u(y.time))}function n(){return s(u(y.time))}function r(){return p(a(y.time))}function o(){return s(a(y.time))}function t(l){return Math.floor((l%m-u(l))/v)}function u(l){return Math.floor((l%v-a(l))/k)}function a(l){return Math.floor((l%k-d(l))/f)}function d(l){return Math.floor(l%f)}function p(l){return(l%100-s(l))/10}function s(l){return l%10}var f=1e3,k=60*f,v=60*k,m=24*v,y=this;y.time=0,y.getHoursTensPlace=e,y.getHoursOnesPlace=c,y.getMinutesTensPlace=i,y.getMinutesOnesPlace=n,y.getSecondsTensPlace=r,y.getSecondsOnesPlace=o}function c(){return{restrict:"EA",scope:{text:"@",hideDivider:"="},bindToController:!0,controller:"DyFlipClockLabelController",controllerAs:"vm",templateUrl:"src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html"}}function i(){}function n(){return{restrict:"EA",scope:{},bindToController:!0,controllerAs:"vm",controller:"DyFlipClockNumberController",templateUrl:"src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html"}}function r(l,e,c){function i(){l.$watch(function(){return e(c.value)(l.$parent)},function(l,e){t.currentValue=l,t.previousValue=e})}function n(l){return t.currentValue===l}function r(l){return t.previousValue!==t.currentValue&&l===t.previousValue}function o(){return t.previousValue!==t.currentValue}var t=this;t.numbers=[0,1,2,3,4,5,6,7,8,9],t.currentValue=0,t.previousValue=0,t.isActive=n,t.isBefore=r,t.isAnimated=o,i()}angular.module("dyFlipClock",["dyFlipClock.dyFlipClockDirective","dyFlipClock.dyFlipClockNumberDirective","dyFlipClock.dyFlipClockLabelDirective"]),angular.module("dyFlipClock.dyFlipClockDirective",["dyFlipClock.dyFlipClockNumberDirective","dyFlipClock.dyFlipClockLabelDirective"]).directive("dyFlipClock",l).controller("DyFlipClockController",e),l.$inject=[],e.$inject=["$interval"],angular.module("dyFlipClock.dyFlipClockLabelDirective",[]).directive("dyFlipClockLabel",c).controller("DyFlipClockLabelController",i),c.$inject=[],i.$inject=[],angular.module("dyFlipClock.dyFlipClockNumberDirective",[]).directive("dyFlipClockNumber",n).controller("DyFlipClockNumberController",r),n.$inject=[],r.$inject=["$scope","$parse","$attrs"],angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-directive/angular-flip-clock-directive.html",'<div class="dy-flip-clock">\n  <dy-flip-clock-label text="Hours" hide-divider="true"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getHoursTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getHoursOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Minutes"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getMinutesTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getMinutesOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Seconds"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getSecondsTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getSecondsOnesPlace()"></dy-flip-clock-number>\n  </ul>\n</div>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html",'<span class="dy-flip-clock-divider" ng-class="{\'dy-flip-clock-divider-hidden\': !!vm.hideDivider}">\n  <span class="dy-flip-clock-label">{{vm.text}}</span>\n  <span class="dy-flip-clock-dot dy-flip-clock-dot-top"></span>\n  <span class="dy-flip-clock-dot dy-flip-clock-dot-bottom"></span>\n</span>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html",'<ul class="dy-flip-clock-number" ng-class="{\'dy-flip-clock-number-animated\': vm.isAnimated()}">\n  <li\n    ng-repeat="number in ::vm.numbers"\n    class="dy-flip-clock-number-digit"\n    ng-class="{\'dy-flip-clock-number-digit-active\': vm.isActive(number), \'dy-flip-clock-number-digit-before\': vm.isBefore(number)}"\n  >\n    <div class="dy-flip-clock-card">\n      <div class="dy-flip-clock-card-up">\n        <div class="dy-flip-clock-card-shadow"></div>\n        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-up">{{::number}}</div>\n      </div>\n      <div class="dy-flip-clock-card-down">\n        <div class="dy-flip-clock-card-shadow"></div>\n        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-down">{{::number}}</div>\n      </div>\n    </div>\n  </li>\n</ul>\n')}])}();

dist/angular-flip-clock.tpl.js

@@ -5,3 +5,3 @@ (function() {
   $templateCache.put('src/js/angular-flip-clock-directive/angular-flip-clock-directive.html',
-    '<div class="flip-counter clock flip-clock-wrapper">\n' +
+    '<div class="dy-flip-clock">\n' +
     '  <dy-flip-clock-label text="Hours" hide-divider="true"></dy-flip-clock-label>\n' +
@@ -25,6 +25,6 @@ '  <dy-flip-clock-number value="vm.getHoursTensPlace()"></dy-flip-clock-number>\n' +
   $templateCache.put('src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html',
-    '<span class="flip-clock-divider" ng-class="{\'flip-clock-divider-hidden\': !!vm.hideDivider}">\n' +
-    '  <span class="flip-clock-label">{{vm.text}}</span>\n' +
-    '  <span class="flip-clock-dot top"></span>\n' +
-    '  <span class="flip-clock-dot bottom"></span>\n' +
+    '<span class="dy-flip-clock-divider" ng-class="{\'dy-flip-clock-divider-hidden\': !!vm.hideDivider}">\n' +
+    '  <span class="dy-flip-clock-label">{{vm.text}}</span>\n' +
+    '  <span class="dy-flip-clock-dot dy-flip-clock-dot-top"></span>\n' +
+    '  <span class="dy-flip-clock-dot dy-flip-clock-dot-bottom"></span>\n' +
     '</span>\n' +
@@ -36,17 +36,18 @@ '');
   $templateCache.put('src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html',
-    '<ul class="flip" ng-class="{\'play\': vm.isAnimated()}">\n' +
+    '<ul class="dy-flip-clock-number" ng-class="{\'dy-flip-clock-number-animated\': vm.isAnimated()}">\n' +
     '  <li\n' +
     '    ng-repeat="number in ::vm.numbers"\n' +
-    '    ng-class="{\'flip-clock-active\': vm.isActive(number), \'flip-clock-before\': vm.isBefore(number)}"\n' +
+    '    class="dy-flip-clock-number-digit"\n' +
+    '    ng-class="{\'dy-flip-clock-number-digit-active\': vm.isActive(number), \'dy-flip-clock-number-digit-before\': vm.isBefore(number)}"\n' +
     '  >\n' +
-    '    <a href="#">\n' +
-    '      <div class="up">\n' +
-    '        <div class="shadow"></div>\n' +
-    '        <div class="inn">{{::number}}</div>\n' +
+    '    <div class="dy-flip-clock-card">\n' +
+    '      <div class="dy-flip-clock-card-up">\n' +
+    '        <div class="dy-flip-clock-card-shadow"></div>\n' +
+    '        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-up">{{::number}}</div>\n' +
     '      </div>\n' +
-    '      <div class="down">\n' +
-    '        <div class="shadow"></div>\n' +
-    '        <div class="inn">{{::number}}</div>\n' +
+    '      <div class="dy-flip-clock-card-down">\n' +
+    '        <div class="dy-flip-clock-card-shadow"></div>\n' +
+    '        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-down">{{::number}}</div>\n' +
     '      </div>\n' +
-    '    </a>\n' +
+    '    </div>\n' +
     '  </li>\n' +
@@ -53,0 +54,0 @@ '</ul>\n' +

dist/angular-flip-clock.tpl.min.js

@@ -1,1 +0,1 @@
-!function(){"use strict";angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-directive/angular-flip-clock-directive.html",'<div class="flip-counter clock flip-clock-wrapper">\n  <dy-flip-clock-label text="Hours" hide-divider="true"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getHoursTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getHoursOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Minutes"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getMinutesTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getMinutesOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Seconds"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getSecondsTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getSecondsOnesPlace()"></dy-flip-clock-number>\n  </ul>\n</div>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html",'<span class="flip-clock-divider" ng-class="{\'flip-clock-divider-hidden\': !!vm.hideDivider}">\n  <span class="flip-clock-label">{{vm.text}}</span>\n  <span class="flip-clock-dot top"></span>\n  <span class="flip-clock-dot bottom"></span>\n</span>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html",'<ul class="flip" ng-class="{\'play\': vm.isAnimated()}">\n  <li\n    ng-repeat="number in ::vm.numbers"\n    ng-class="{\'flip-clock-active\': vm.isActive(number), \'flip-clock-before\': vm.isBefore(number)}"\n  >\n    <a href="#">\n      <div class="up">\n        <div class="shadow"></div>\n        <div class="inn">{{::number}}</div>\n      </div>\n      <div class="down">\n        <div class="shadow"></div>\n        <div class="inn">{{::number}}</div>\n      </div>\n    </a>\n  </li>\n</ul>\n')}])}();
+!function(){"use strict";angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-directive/angular-flip-clock-directive.html",'<div class="dy-flip-clock">\n  <dy-flip-clock-label text="Hours" hide-divider="true"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getHoursTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getHoursOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Minutes"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getMinutesTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getMinutesOnesPlace()"></dy-flip-clock-number>\n\n  <dy-flip-clock-label text="Seconds"></dy-flip-clock-label>\n  <dy-flip-clock-number value="vm.getSecondsTensPlace()"></dy-flip-clock-number>\n  <dy-flip-clock-number value="vm.getSecondsOnesPlace()"></dy-flip-clock-number>\n  </ul>\n</div>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-label-directive/angular-flip-clock-label-directive.html",'<span class="dy-flip-clock-divider" ng-class="{\'dy-flip-clock-divider-hidden\': !!vm.hideDivider}">\n  <span class="dy-flip-clock-label">{{vm.text}}</span>\n  <span class="dy-flip-clock-dot dy-flip-clock-dot-top"></span>\n  <span class="dy-flip-clock-dot dy-flip-clock-dot-bottom"></span>\n</span>\n')}]),angular.module("dyFlipClock").run(["$templateCache",function(l){l.put("src/js/angular-flip-clock-number-directive/angular-flip-clock-number-directive.html",'<ul class="dy-flip-clock-number" ng-class="{\'dy-flip-clock-number-animated\': vm.isAnimated()}">\n  <li\n    ng-repeat="number in ::vm.numbers"\n    class="dy-flip-clock-number-digit"\n    ng-class="{\'dy-flip-clock-number-digit-active\': vm.isActive(number), \'dy-flip-clock-number-digit-before\': vm.isBefore(number)}"\n  >\n    <div class="dy-flip-clock-card">\n      <div class="dy-flip-clock-card-up">\n        <div class="dy-flip-clock-card-shadow"></div>\n        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-up">{{::number}}</div>\n      </div>\n      <div class="dy-flip-clock-card-down">\n        <div class="dy-flip-clock-card-shadow"></div>\n        <div class="dy-flip-clock-card-value dy-flip-clock-card-value-down">{{::number}}</div>\n      </div>\n    </div>\n  </li>\n</ul>\n')}])}();

gulpfile.js

@@ -13,3 +13,7 @@ /* jshint node: true */
 var gulpNgHtml2Js = require('gulp-ng-html2js');
+var gulpPostcss = require('gulp-postcss');
+var autoprefixer = require('autoprefixer');
 
+var browserSync = require('browser-sync').create();
+
 var paths = {
@@ -19,2 +23,3 @@ CSS_SRC: 'src/css/**/*.css',
   JS_DIST: 'dist/**/*.js',
+  CSS_DIST: 'dist/**/*.css',
   FULL_JS_SRC: ['dist/angular-flip-clock.js', 'dist/angular-flip-clock.tpl.js'],
@@ -35,7 +40,12 @@ TEMPLATES_SRC: 'src/js/**/*.html',
   return gulp.src(paths.CSS_SRC)
+    .pipe(gulpPostcss([
+      autoprefixer({
+        browsers: ['last 2 versions']
+      })
+    ]))
     .pipe(gulp.dest(paths.DIST));
 });
 
-gulp.task('minify-css', ['clean'], function() {
-  return gulp.src(paths.CSS_SRC)
+gulp.task('minify-css', ['copy-css'], function() {
+  return gulp.src(paths.CSS_DIST)
     .pipe(gulpMinifyCss())
@@ -81,2 +91,15 @@ .pipe(gulpRename(addMinToBasename))
 
+gulp.task('serve', ['build'], function() {
+    browserSync.init({
+        server: {
+            baseDir: './'
+        },
+        startPath: '/example'
+    });
+
+    gulp.watch('src/**/*', ['build-and-reload']);
+});
+
+gulp.task('build-and-reload', ['build'], browserSync.reload);
+
 gulp.task('build-css', ['copy-css', 'minify-css']);
@@ -83,0 +106,0 @@

package.json

 {
   "name": "angular-flip-clock",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Port of FlipClock.js to Angular without any dependencies",
@@ -38,2 +38,4 @@ "main": "dist/angular-flip-clock.tpl.min.js",
   "devDependencies": {
+    "autoprefixer": "^6.0.2",
+    "browser-sync": "^2.9.3",
     "del": "^2.0.1",
@@ -43,2 +45,3 @@ "gulp": "^3.9.0",
     "gulp-ng-html2js": "^0.2.0",
+    "gulp-postcss": "^6.0.0",
     "gulp-uglify": "^1.4.0",
@@ -45,0 +48,0 @@ "gulp-util": "^3.0.6",

README.md

 # angular-flip-clock
 Port of FlipClock.js to Angular without any dependencies
+
+### [Demo](http://dmytroyarmak.github.io/angular-flip-clock/example)

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

5

66.67%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Total package byte prevSize

57499

-10.91%

Dev dependency count

11

37.5%

Lines of code

1168

-22.55%

No dependency changes