Implement gulp to create dist version

dist/color-chooser.css

@@ -0,0 +1,24 @@
+.lk-color-chooser {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+.lk-color-chooser__color {
+  display: inline-block;
+  width : 30px;
+  height: 30px;
+  border-radius: 50%;
+  margin-right: 5px;
+  cursor: pointer;
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+}
+
+.lk-color-chooser__color:hover, .lk-color-chooser__color.selected {
+  opacity: 1;
+  filter: alpha(opacity=100);
+}
+
+.lk-color-chooser__color:last-child {
+  margin-right: 0;
+}

dist/color-chooser.js

@@ -0,0 +1,93 @@
+/*
+ * angular-color-chooser
+ *
+ * Allow you to pick a color from a custom palette
+ *
+ * (c) 2015 Loic Kartono
+ * License: MIT
+ */
+
+'use strict';
+
+(function () {
+
+  angular.module('lk-color-chooser', [])
+
+  .provider('lkColorSettings', function () {
+    this.colors = [];
+
+    /**
+     * @ngdoc function
+     * @name lkColorSettings.$get
+     * @module lk-color-chooser
+     * @kind function
+     *
+     * @description Provider factory $get method.
+     * @returns {object} Hash of attributes.
+     */
+    this.$get = function () {
+      return {
+        colors: this.colors
+      }
+    };
+
+    /**
+     * @ngdoc function
+     * @name lkColorSettings.configure
+     * @module lk-color-chooser
+     * @kind function
+     *
+     * @description Set the options.
+     * @param {object} Hash of options.
+     * @returns {void} Modify class attributes value.
+     */
+    this.configure = function (config) {
+      var key;
+      for (key in config) {
+        this[key] = config[key];
+      }
+    };
+  })
+
+  .directive('lkColorChooser', ['lkColorSettings', '$timeout', function (lkColorSettings, $timeout) {
+    return {
+      restrict: 'EA',
+      template: '<ul class="lk-color-chooser"><lk-color ng-repeat="color in colors track by $index" color="color" ng-class="{\'selected\': selected == color}"></lk-color></ul>',
+      replace: true,
+      scope: {
+        colors: '=?',
+        selected: '='
+      },
+      controller: ['$scope', '$timeout', function lkColorChooserCtrl ($scope, $timeout) {
+        this.setSelectedColor = function (color) {
+          $timeout(function() {
+            $scope.selected = color;
+          });
+        }
+      }],
+      link: function (scope, element, attrs) {
+        if (!scope.colors) {
+          scope.colors = lkColorSettings.colors;
+        }
+      }
+    }
+  }])
+
+  .directive('lkColor', function () {
+    return {
+      restrict: 'EA',
+      require: '^lkColorChooser',
+      template: '<li class="lk-color-chooser__color" style="background-color: {{ color }}">&nbsp;</li>',
+      replace: true,
+      scope: {
+        color: '='
+      },
+      link: function (scope, element, attrs, lkColorChooserCtrl) {
+        element.on('click', function () {
+          lkColorChooserCtrl.setSelectedColor(scope.color);
+        })
+      }
+    }
+  });
+
+})();

gulpfile.js

@@ -0,0 +1,31 @@
+var gulp      = require('gulp');
+var uglify    = require('gulp-uglify');
+var rename    = require('gulp-rename');
+var minifyCSS = require('gulp-minify-css');
+
+// Copy non-uglify version to "dist"
+gulp.task('copy', function() {
+  return gulp.src(['src/*.js', 'src/*.css']).pipe(gulp.dest('dist'));
+});
+
+// Create an uglify version to "dist"
+gulp.task('uglify', function() {
+  return gulp.src('src/*.js').pipe(uglify())
+                             .pipe(rename('color-chooser.min.js'))
+                             .pipe(gulp.dest('dist'));
+});
+
+// Minify css
+gulp.task('cssmin', function() {
+  return gulp.src('src/*.css').pipe(minifyCSS())
+                             .pipe(rename('color-chooser.min.css'))
+                             .pipe(gulp.dest('dist'));
+});
+
+gulp.task('watch', function() {
+  gulp.watch('src/*.js', ['copy', 'uglify', 'cssmin'])
+});
+
+gulp.task('default', function() {
+  gulp.start('watch');
+});

package.json

@@ -10,6 +10,7 @@
     "jasmine-core": "^2.1.3",
     "karma": "^0.12.31",
     "karma-jasmine": "^0.3.5",
-    "karma-phantomjs-launcher": "^0.1.4"
+    "karma-phantomjs-launcher": "^0.1.4",
+    "gulp-minify-css": "^0.4.3"
   }
 }