Publishing to AWS

.gitignore

@@ -2,3 +2,4 @@ node_modules
 *.sublime-project
 *.sublime-workspace
 .DS_Store
+aws.json

docs/index.html

@@ -8,7 +8,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1">
 
 		<!-- Styles -->
-		<link rel="stylesheet" href="../dist/css/plyr.css">
+		<link rel="stylesheet" href="plyr/css/plyr.css">
 
 		<!-- Docs styles -->
 		<link rel="stylesheet" href="dist/css/docs.css">
@@ -67,11 +67,11 @@
 		<!-- Load SVG defs -->
 		<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
 		<script>
-		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"../dist/sprite.svg");
+		(function(d,p){var a=new XMLHttpRequest(),b=d.body;a.open("GET",p,!0);a.send();a.onload=function(){var c=d.createElement("div");c.style.display="none";c.innerHTML=a.responseText;b.insertBefore(c,b.childNodes[0])}})(document,"plyr/sprite.svg");
 		</script>
 
 		<!-- Plyr core script -->
-		<script src="../dist/js/plyr.js"></script>
+		<script src="plyr/js/plyr.js"></script>
 
 		<!-- Docs script -->
 		<script src="dist/js/docs.js"></script>

gulpfile.js

@@ -16,7 +16,10 @@ var fs 			= require("fs"),
 	prefix 		= require("gulp-autoprefixer"),
 	svgstore 	= require("gulp-svgstore"),
 	svgmin 		= require("gulp-svgmin"),
-	hogan 		= require("gulp-hogan-compile");
+	hogan 		= require("gulp-hogan-compile"),
+	rename 		= require("gulp-rename"),
+	s3 			= require("gulp-s3"),
+	gzip 		= require("gulp-gzip");
 
 var root = __dirname,
 	paths = {
@@ -29,11 +32,7 @@ var root = __dirname,
 			sprite: 	path.join(root, "src/sprite/*.svg")
 		},
 		// Output paths
-		output: {
-			js:  		path.join(root, "dist/js/"),
-			css:  		path.join(root, "dist/css/"),
-			sprite:  	path.join(root, "dist/")
-		}
+		output: path.join(root, "dist/")
 	},
 	docs: {
 		// Source paths
@@ -43,10 +42,7 @@ var root = __dirname,
 			templates: 	path.join(root, "docs/src/templates/*.html")
 		},
 		// Output paths
-		output: {
-			js:  		path.join(root, "docs/dist/js/"),
-			css:  		path.join(root, "docs/dist/css/")
-		}
+		output: path.join(root, "docs/dist/")
 	}
 },
 
@@ -58,7 +54,8 @@ tasks = {
 },
 
 // Fetch bundles from JSON
-bundles = loadJSON(path.join(root, "bundles.json"));
+bundles = loadJSON(path.join(root, "bundles.json")),
+package = loadJSON(path.join(root, "package.json"));
 
 // Load json
 function loadJSON(path) {
@@ -66,7 +63,7 @@ function loadJSON(path) {
 }
 
 var build = {
-	js: function (files, bundle, output) {
+	js: function (files, bundle) {
 		for (var key in files) {
 			(function(key) {
 				var name = "js-" + key;
@@ -77,12 +74,12 @@ var build = {
 						.src(bundles[bundle].js[key])
 						.pipe(concat(key))
 						.pipe(uglify())
-						.pipe(gulp.dest(output));
+						.pipe(gulp.dest(paths[bundle].output));
 				});
 			})(key);
 		}
 	},
-	less: function(files, bundle, output) {
+	less: function(files, bundle) {
 		for (var key in files) {
 			(function (key) {		
 				var name = "less-" + key;
@@ -96,12 +93,12 @@ var build = {
 						.pipe(concat(key))
 						.pipe(prefix(["last 2 versions"], { cascade: true }))
 						.pipe(minify())
-						.pipe(gulp.dest(output));
+						.pipe(gulp.dest(paths[bundle].output));
 				});
 			})(key);
 		}
 	},
-	sass: function(files, bundle, output) {
+	sass: function(files, bundle) {
 		for (var key in files) {
 			(function (key) {		
 				var name = "sass-" + key;
@@ -115,51 +112,51 @@ var build = {
 						.pipe(concat(key))
 						.pipe(prefix(["last 2 versions"], { cascade: true }))
 						.pipe(minify())
-						.pipe(gulp.dest(output));
+						.pipe(gulp.dest(paths[bundle].output));
 				});
 			})(key);
 		}
 	},
-	sprite: function(source, output) {
+	sprite: function() {
 		// Process Icons
 		gulp.task("sprite", function () {
 			return gulp
-				.src(source)
+				.src(paths.plyr.src.sprite)
 				.pipe(svgmin({
 					plugins: [{
 						removeDesc: true
 					}]
 				}))
 		        .pipe(svgstore())
-			    .pipe(gulp.dest(output));
+			    .pipe(gulp.dest(paths.plyr.output));
 		});
 	},
-	templates: function(source, output) {
+	templates: function() {
 		// Build templates
 		gulp.task("templates", function () {
 			return gulp
-				.src(source)
+				.src(paths.docs.src.templates)
 				.pipe(hogan("templates.js", {
 					wrapper: false,
 					templateName: function (file) {
 						return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
 					}
 				}))
-				.pipe(gulp.dest(output));
+				.pipe(gulp.dest(paths.docs.output));
 		});
 	}
 };
 
 // Plyr core files
-build.js(bundles.plyr.js, "plyr", paths.plyr.output.js);
-build.less(bundles.plyr.less, "plyr", paths.plyr.output.css);
-build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css);
-build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite);
+build.js(bundles.plyr.js, "plyr");
+build.less(bundles.plyr.less, "plyr");
+build.sass(bundles.plyr.sass, "plyr");
+build.sprite();
 
 // Docs files
-build.templates(paths.docs.src.templates, paths.docs.output.js);
-build.less(bundles.docs.less, "docs", paths.docs.output.css);
-build.js(bundles.docs.js, "docs", paths.docs.output.js);
+build.templates();
+build.less(bundles.docs.less, "docs");
+build.js(bundles.docs.js, "docs");
 
 // Default gulp task
 gulp.task("default", function(){
@@ -188,3 +185,34 @@ gulp.task("watch", function () {
     gulp.watch(paths.docs.src.less, tasks.less);
 	gulp.watch(paths.docs.src.templates, "js");
 });
+
+// Publish the docs site
+gulp.task("cdn", function () {
+	try {
+		var aws 	= loadJSON(path.join(root, "aws.json")),
+			version = package.version,
+			maxAge 	= 31536000, // seconds 1 year
+			options = {
+				headers: {
+					"Cache-Control": "max-age=" + maxAge + ", no-transform, public",
+					"Content-Encoding": "gzip",
+					"Vary": "Accept-Encoding"
+				},
+				gzippedOnly: true
+			};
+
+		console.log("Publishing " + version);
+
+		return gulp.src("dist/**")
+			.pipe(rename(function (path) {
+			    path.dirname = path.dirname.replace(".", version);
+			}))
+			.pipe(gzip())
+			.pipe(s3(aws, options));
+	} 
+	catch (e) {}
+});
+
+gulp.task("publish", function () {
+
+});

package.json

@@ -9,9 +9,12 @@
     "gulp": "~3.8.6",
     "gulp-autoprefixer": "^0.0.8",
     "gulp-concat": "~2.3.3",
+    "gulp-gzip": "^1.0.0",
     "gulp-hogan-compile": "^0.4.1",
     "gulp-less": "~1.3.1",
     "gulp-minify-css": "~0.3.6",
+    "gulp-rename": "^1.2.0",
+    "gulp-s3": "^0.3.0",
     "gulp-sass": "^1.3.3",
     "gulp-svgmin": "^1.0.0",
     "gulp-svgstore": "^5.0.0",

readme.md

@@ -30,7 +30,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
 
 ## Implementation
 
-Check `docs/index.html` and `docs/dist/js/docs.js` for an example setup.
+Check `docs/index.html` and `docs/dist/docs.js` for an example setup.
 
 ### Bower
 If bower is your thang, you can grab Plyr using:
@@ -43,7 +43,7 @@ More info on setting up dependencies can be found in the [Bower Docs](http://bow
 If you want to use the default css, add the `plyr.css` file from /dist into your head, or even better use `plyr.less` or `plyr.sass` file included in `/src` in your build to save a request. 
 
 ```html
-<link rel="stylesheet" href="dist/css/plyr.css">
+<link rel="stylesheet" href="dist/plyr.css">
 ```
 
 ### SVG
@@ -62,7 +62,7 @@ The SVG sprite for the controls icons is loaded in by AJAX to help with performa
 		c.innerHTML=a.responseText;
 		b.insertBefore(c,b.childNodes[0])
 	}
-})(document,"dist/svg/sprite.svg");
+})(document,"dist/sprite.svg");
 </script>
 ```
 More info on SVG sprites here:
@@ -116,7 +116,7 @@ More info on CORS here:
 Much of the behaviour of the player is configurable when initialising the library. Below is an example of a default instance.
 
 ```html
-<script src="dist/js/plyr.js"></script>
+<script src="dist/plyr.js"></script>
 <script>
 plyr.setup({
 	html: **your controls html**