Add AMD and CJS support

- Added AMD and CJS support using UMD gulp plugin during project build.

- Setup NPM project.

gulpfile.js

@@ -1,18 +1,25 @@
-/*global -$ */
 'use strict';
 
-var DIR_BUILD_BASE = 'dist/';
-var DIR_BUILD_SCRIPTS = DIR_BUILD_BASE + 'scripts/';
-var DIR_BUILD_STYLES = DIR_BUILD_BASE + 'styles/';
-var BASE_NAME = 'stickyheaders';
-
 
+var project = require('./package.json');
 var gulp = require('gulp');
 var plugins = require('gulp-load-plugins')();
 var browserSync = require('browser-sync');
 var reload = browserSync.reload;
 
 
+var DIR_BUILD_BASE = 'dist/';
+var DIR_BUILD_SCRIPTS = DIR_BUILD_BASE + 'scripts/';
+var DIR_BUILD_STYLES = DIR_BUILD_BASE + 'styles/';
+var UMD_CONFIG = {
+        namespace: function() {
+            return project.title;
+        },
+        exports: function() {
+            return project.title;
+        }
+    };
+
 
 function processStyles (src) {
     return function () {
@@ -104,9 +111,10 @@ gulp.task('build:vanilla', ['jshint'], function() {
 
     return gulp.src('src/scripts/main.js')
         .pipe(plugins.sourcemaps.init())
-        .pipe(plugins.header(';(function(window, document, undefined) {'))
-        .pipe(plugins.footer('})(window, window.document);'))
-        .pipe(plugins.rename({ basename: BASE_NAME }))
+        .pipe(plugins.umd(UMD_CONFIG))
+        .pipe(plugins.header(';(function(document, undefined) {\n'))
+        .pipe(plugins.footer('})(window.document);'))
+        .pipe(plugins.rename({ basename: project.name }))
         .pipe(plugins.size({ showFiles: true }))
         .pipe(gulp.dest(DIR_BUILD_SCRIPTS))
         .pipe(plugins.uglify())
@@ -121,9 +129,10 @@ gulp.task('build:jquery', ['jshint'], function() {
 
     return gulp.src(['src/scripts/main.js', 'src/scripts/jquery-plugin.js'])
         .pipe(plugins.sourcemaps.init())
-        .pipe(plugins.concat(BASE_NAME + '.jquery.js'))
-        .pipe(plugins.header(';(function($, window, document, undefined) {'))
-        .pipe(plugins.footer('})(jQuery, window, window.document);'))
+        .pipe(plugins.concat(project.name + '.jquery.js'))
+        .pipe(plugins.umd(UMD_CONFIG))
+        .pipe(plugins.header(';(function($, document, undefined) {\n'))
+        .pipe(plugins.footer('})(jQuery, window.document);'))
         .pipe(plugins.size({ showFiles: true }))
         .pipe(gulp.dest(DIR_BUILD_SCRIPTS))
         .pipe(plugins.uglify())
@@ -136,7 +145,7 @@ gulp.task('build:jquery', ['jshint'], function() {
 gulp.task('build:styles', ['styles'], function() {
 
     return gulp.src(['.tmp/styles/main.css'])
-        .pipe(plugins.rename({ basename: BASE_NAME }))
+        .pipe(plugins.rename({ basename: project.name }))
         .pipe(gulp.dest(DIR_BUILD_STYLES))
         .pipe(plugins.csso())
         .pipe(plugins.rename({ extname: '.min.css' }))

package.json

@@ -1,7 +1,18 @@
 {
-  "private": true,
-  "engines": {
-    "node": ">=0.10.0"
+  "name": "stickyheaders",
+  "title": "StickyHeaders",
+  "description": "JavaScript library which enables sticky section headers in a scrollable list view",
+  "version": "0.0.0",
+  "main": "dist/scripts/stickyheaders.js",
+  "homepage": "http://skhilko.github.io/StickyHeaders",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/skhilko/StickyHeaders.git"
+  },
+  "author": {
+    "name": "Siarhei Khilko",
+    "email": "[email protected]",
+    "url" : "https://github.com/skhilko"
   },
   "devDependencies": {
     "autoprefixer-core": "^4.0.2",
@@ -23,6 +34,7 @@
     "gulp-size": "^1.1.0",
     "gulp-sourcemaps": "^1.5.1",
     "gulp-uglify": "^1.1.0",
+    "gulp-umd": "^0.1.3",
     "gulp-useref": "^1.0.2",
     "jshint-stylish": "^1.0.0",
     "main-bower-files": "^2.5.0",

src/scripts/main.js

@@ -170,5 +170,3 @@ StickyHeaders.prototype.onHeaderScroll = function(ev) {
 StickyHeaders.prototype.isWithinHeaderContainer = function(header, scrollTop) {
     return header.top >= scrollTop && header.top <= this.headerContainerHeight + scrollTop;
 };
-
-window.StickyHeaders = StickyHeaders;