added gulp build

Author: Matan SarSha

.gitignore

@@ -1 +1,3 @@
-node_modules/
+node_modules/
+example/
+dist/

example/index.html

@@ -66,9 +66,9 @@
             </tbody>
         </table>
     </div>
-    <script src="../node_modules/angular/angular.js"></script>
-    <script src="../node_modules/angular-animate/angular-animate.min.js"></script>
-    <script src="../src/loading-spinner.js"></script>
+    <script src="angular.min.js"></script>
+    <script src="angular-animate.min.js"></script>
+    <script src="loading-spinner.min.js"></script>
     <script src="app.js"></script>
 </body>
 

gulpfile.js

@@ -0,0 +1,37 @@
+var gulp = require('gulp');
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+var css = require('browserify-css');
+var uglify = require('gulp-uglify');
+
+gulp.task('browserify', function () {
+    var b = browserify({
+        entries: ['./src/loading-spinner.js'],
+        transform: [css]
+    });
+    return b.bundle()
+        .on('error', function (e) {
+            console.log(e);
+        })
+        .pipe(source('loading-spinner.min.js'))
+        .pipe(gulp.dest('./dist/'))
+});
+
+gulp.task('build-js', ['browserify'], function () {
+    return gulp
+        .src('./dist/loading-spinner.min.js')
+        .pipe(uglify())
+        .pipe(gulp.dest('./dist/'));
+})
+
+gulp.task('default', ['build-js'], function () {
+})
+
+gulp.task('watch', function () {
+    var watcher = gulp
+        .watch(['src/**/*.js', 'src/**/*.html', 'src/**/*.css'], ['build-js']);
+
+    watcher.on('change', function(event){
+        console.log(event);
+    })
+})

package.json

@@ -11,5 +11,12 @@
   "dependencies": {
     "angular": "^1.5.8",
     "angular-animate": "^1.5.8"
+  },
+  "devDependencies": {
+    "browserify": "^13.1.0",
+    "browserify-css": "^0.9.1",
+    "gulp": "^3.9.1",
+    "gulp-uglify": "^2.0.0",
+    "vinyl-source-stream": "^1.1.0"
   }
 }

src/loading-spinner.js

@@ -1,9 +1,12 @@
+require('./loading-spinner.css');
+
 (function () {
     angular
         .module('sarsha.spinner', ['ngAnimate'])
         .directive('sarshaSpinner', sarshaSpinner)
         .service('spinnerService', spinnerService);
 
+    sarshaSpinner.$inject = ['spinnerService'];
     function sarshaSpinner(spinnerService) {
         return {
             restrict: 'E',
@@ -12,21 +15,21 @@
                 active: '@'
             },
             transclude: true,
-            template: `
-                <div class="sarsha-spinner-container" ng-if="active">
-                    <div class="sarsha-spinner">
-                        <div ng-transclude>
-                           <div class="spinner">
-                                <div class="rect1"></div>
-                                <div class="rect2"></div>
-                                <div class="rect3"></div>
-                                <div class="rect4"></div>
-                                <div class="rect5"></div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            `,
+            template: [
+                '<div class="sarsha-spinner-container" ng-if="active">',
+                '<div class="sarsha-spinner">',
+                '<div ng-transclude>',
+                '<div class="spinner">',
+                '<div class="rect1"></div>',
+                '<div class="rect2"></div>',
+                '<div class="rect3"></div>',
+                '<div class="rect4"></div>',
+                '<div class="rect5"></div>',
+                '</div>',
+                '</div>',
+                '</div>',
+                '</div>'
+            ].join(" "),
             link: function (scope, elm, attrs) {
                 var parent = elm.parent();
                 var parentPosition = parent.position;