Integrate minification with gulp

README.md

@@ -4,17 +4,17 @@ easily-styled format.
 
 ## Usage
 ### Prerequisites
-Download the project files or install it using NPM, Yarn, etc...
+Download the project files or install it using Yarn, NPM, etc...
 ```sh
-$ npm install jquery.nice-number --save
 $ yarn add jquery.nice-number
+$ npm install jquery.nice-number --save
 ```
 
 Include the plugin files in your source.
 > Note: the path will need to be changed if you downloaded or moved the files.
 ```html
-<link rel="stylesheet" href="node_modules/jquery.nice-number/jquery.nice-number.css">
-<script src="node_modules/jquery.nice-number/jquery.nice-number.js"></script>
+<link rel="stylesheet" href="node_modules/jquery.nice-number/dist/jquery.nice-number.min.css">
+<script src="node_modules/jquery.nice-number/dist/jquery.nice-number.min.js"></script>
 ```
 
 ### Basic usage
@@ -37,3 +37,15 @@ autoSizeBuffer | number | The number of extra character widths that are added to
 buttonDecrement | jQuery element, HTML element, HTML string, or plain string | The contents of the decrement button | `'-'`
 buttonIncrement | jQuery element, HTML element, HTML string, or plain string | The contents of the increment button | `'+'`
 buttonPosition | `'around'`, `'left'`, or `'right'` | The positions of the control buttons | `'around'`
+
+## Development
+### Building
+Install the project dependencies
+```sh
+$ yarn install
+```
+
+Build the project
+```sh
+$ gulp
+```

gulpfile.js

@@ -0,0 +1,30 @@
+var gulp = require('gulp');
+var rename = require('gulp-rename');
+var uglify = require('gulp-uglify');
+var uglifycss = require('gulp-uglifycss');
+var pump = require('pump');
+
+gulp.task('default', function (cb) {
+  pump(
+    [
+      gulp.src('src/**/*'),
+      gulp.dest('dist'),
+      gulp.src('src/**/*.js'),
+      uglify(),
+      rename(function (path) {
+        path.basename += ".min";
+      }),
+      gulp.dest('dist'),
+      gulp.src('src/**/*.css'),
+      uglifycss({
+        "maxLineLen": 80,
+        "uglyComments": true
+      }),
+      rename(function (path) {
+        path.basename += ".min";
+      }),
+      gulp.dest('dist'),
+    ],
+    cb
+  );
+});

package.json

@@ -23,5 +23,13 @@
   "bugs": {
     "url": "https://github.com/joshua-s/jquery.nice-number/issues"
   },
-  "homepage": "https://github.com/joshua-s/jquery.nice-number#readme"
+  "homepage": "https://github.com/joshua-s/jquery.nice-number#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^3.0.0",
+    "gulp-uglifycss": "^1.0.9",
+    "pump": "^2.0.0"
+  }
 }

src/jquery.nice-number.css

@@ -0,0 +1,18 @@
+.nice-number {
+  display: inline-flex;
+  justify-content: stretch;
+}
+
+.nice-number input {
+  vertical-align: middle;
+  -moz-appearance: textfield;
+  box-sizing: content-box;
+  margin: 0;
+  text-align: center;
+}
+
+.nice-number input::-webkit-inner-spin-button,
+.nice-number input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}

src/jquery.nice-number.js

@@ -0,0 +1,105 @@
+(function ($) {
+  $.fn.niceNumber = function(options) {
+    var settings = $.extend({
+          autoSize: true,
+          autoSizeBuffer: 1,
+          buttonDecrement: '-',
+          buttonIncrement: "+",
+          buttonPosition: 'around'
+        }, options);
+
+    return this.each(function(){
+      var currentInput = this;
+
+      // Generate container
+      var $inputContainer = $('<div/>',{
+          class: 'nice-number'
+        })
+        .insertAfter(currentInput);
+
+      // Generate interval (object so it is passed by reference)
+      var interval = {};
+
+      // Generate buttons
+      var $minusButton = $('<button/>')
+        .attr('type', 'button')
+        .html(settings.buttonDecrement)
+        .on('mousedown mouseup mouseleave', function(event){
+          changeInterval(event.type, interval, function(){
+            currentInput.value--;
+          });
+
+          // Trigger the input event here to avoid event spam
+          if (event.type == 'mouseup'
+              || event.type == 'mouseleave') {
+
+            $(currentInput).trigger('input');
+          }
+        });
+
+      var $plusButton = $('<button/>')
+        .attr('type', 'button')
+        .html(settings.buttonIncrement)
+        .on('mousedown mouseup mouseleave', function(event){
+          changeInterval(event.type, interval, function(){
+            currentInput.value++;
+          });
+
+          // Trigger the input event here to avoid event spam
+          if (event.type == 'mouseup'
+              || event.type == 'mouseleave') {
+
+            $(currentInput).trigger('input');
+          }
+        });
+
+      // Append elements
+      switch (settings.buttonPosition) {
+        case 'left':
+          $minusButton.appendTo($inputContainer);
+          $plusButton.appendTo($inputContainer);
+          $(currentInput).appendTo($inputContainer);
+          break;
+        case 'right':
+          $(currentInput).appendTo($inputContainer);
+          $minusButton.appendTo($inputContainer);
+          $plusButton.appendTo($inputContainer);
+          break;
+        case 'around':
+        default:
+          $minusButton.appendTo($inputContainer);
+          $(currentInput).appendTo($inputContainer);
+          $plusButton.appendTo($inputContainer);
+          break;
+      }
+
+      // Nicely size input
+      if (settings.autoSize) {
+        $(currentInput).width($(currentInput).val().length+settings.autoSizeBuffer+"ch");
+        $(currentInput).on('keyup input',function(){
+          $(currentInput).animate({
+            'width': $(currentInput).val().length+settings.autoSizeBuffer+"ch"
+          }, 200);
+        });
+      }
+    });
+  };
+
+  function changeInterval(eventType, interval, callback) {
+    if (eventType == "mousedown") {
+      interval.timeout = setTimeout(function(){
+        interval.actualInterval = setInterval(function(){
+          callback();
+        }, 100);
+      }, 200);
+      callback();
+    } else {
+      if (interval.timeout) {
+        clearTimeout(interval.timeout);
+      }
+      if (interval.actualInterval) {
+        clearInterval(interval.actualInterval);
+      }
+    }
+  }
+}(jQuery));