diff options
| -rw-r--r-- | bower.json | 6 | ||||
| -rw-r--r-- | bundles.json | 2 | ||||
| -rw-r--r-- | changelog.md | 5 | ||||
| -rw-r--r-- | dist/plyr.css (renamed from dist/css/plyr.css) | 0 | ||||
| -rw-r--r-- | dist/plyr.js (renamed from dist/js/plyr.js) | 0 | ||||
| -rw-r--r-- | docs/dist/docs.css (renamed from docs/dist/css/docs.css) | 0 | ||||
| -rw-r--r-- | docs/dist/docs.js (renamed from docs/dist/js/docs.js) | 0 | ||||
| -rw-r--r-- | docs/dist/templates.js (renamed from docs/dist/js/templates.js) | 0 | ||||
| -rw-r--r-- | docs/index.html | 10 | ||||
| -rw-r--r-- | gulpfile.js | 117 | ||||
| -rw-r--r-- | package.json | 6 | ||||
| -rw-r--r-- | readme.md | 18 |
12 files changed, 117 insertions, 47 deletions
@@ -1,6 +1,5 @@ { "name": "plyr", - "version": "1.0.17", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "keywords": [ @@ -14,10 +13,11 @@ ], "dependencies": {}, "main": [ - "dist/css/plyr.css", - "dist/js/plyr.js", + "dist/plyr.css", + "dist/plyr.js", "dist/sprite.svg", "src/less/plyr.less", + "src/sass/plyr.sass", "src/js/plyr.js" ], "ignore": [ diff --git a/bundles.json b/bundles.json index caf9f133..1f9733a4 100644 --- a/bundles.json +++ b/bundles.json @@ -17,7 +17,7 @@ "js": { "docs.js": [ "docs/src/js/lib/hogan-3.0.2.mustache.js", - "docs/dist/js/templates.js", + "docs/dist/templates.js", "docs/src/js/docs.js" ] } diff --git a/changelog.md b/changelog.md index 74423efa..b23b7c14 100644 --- a/changelog.md +++ b/changelog.md @@ -1,6 +1,9 @@ # Changelog -## v1.0.7 +## v1.0.18 +- Added CDN references + +## v1.0.17 - SASS support added (thanks to @brunowego) - Docs completely seperated to avoid any confusion - New gulp tasks (will add more documentation for this) diff --git a/dist/css/plyr.css b/dist/plyr.css index bcb209d1..bcb209d1 100644 --- a/dist/css/plyr.css +++ b/dist/plyr.css diff --git a/dist/js/plyr.js b/dist/plyr.js index 200c18b4..200c18b4 100644 --- a/dist/js/plyr.js +++ b/dist/plyr.js diff --git a/docs/dist/css/docs.css b/docs/dist/docs.css index 19f19fb1..19f19fb1 100644 --- a/docs/dist/css/docs.css +++ b/docs/dist/docs.css diff --git a/docs/dist/js/docs.js b/docs/dist/docs.js index 7c72517b..7c72517b 100644 --- a/docs/dist/js/docs.js +++ b/docs/dist/docs.js diff --git a/docs/dist/js/templates.js b/docs/dist/templates.js index 9526688b..9526688b 100644 --- a/docs/dist/js/templates.js +++ b/docs/dist/templates.js diff --git a/docs/index.html b/docs/index.html index 5a9ae5fc..5dada606 100644 --- a/docs/index.html +++ b/docs/index.html @@ -8,10 +8,10 @@ <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Styles --> - <link rel="stylesheet" href="../dist/css/plyr.css"> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.17/plyr.css"> <!-- Docs styles --> - <link rel="stylesheet" href="dist/css/docs.css"> + <link rel="stylesheet" href="//cdn.plyr.io/1.0.17/docs.css"> </head> <body> <header> @@ -67,13 +67,13 @@ <!-- 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,"//cdn.plyr.io/1.0.17/sprite.svg"); </script> <!-- Plyr core script --> - <script src="../dist/js/plyr.js"></script> + <script src="//cdn.plyr.io/1.0.17/plyr.js"></script> <!-- Docs script --> - <script src="dist/js/docs.js"></script> + <script src="//cdn.plyr.io/1.0.17/docs.js"></script> </body> </html>
\ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 22740ed0..302d9d79 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -16,10 +16,14 @@ 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"), + replace = require("gulp-replace"); var root = __dirname, - paths = { +paths = { plyr: { // Source paths src: { @@ -29,11 +33,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,11 +43,11 @@ 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/"), + // Docs + root: path.join(root, "docs/") + }, + upload: [path.join(root, "dist/**"), path.join(root, "docs/dist/**")] }, // Task arrays @@ -58,7 +58,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 +67,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 +78,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 +97,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 +116,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(){ @@ -187,4 +188,56 @@ gulp.task("watch", function () { gulp.watch(paths.docs.src.js, tasks.js); gulp.watch(paths.docs.src.less, tasks.less); gulp.watch(paths.docs.src.templates, "js"); +}); + +// Publish the docs site +try { + var aws = loadJSON(path.join(root, "aws.json")); +} +catch (e) { } + +var version = package.version, +maxAge = 31536000, // seconds 1 year +options = { + cdn: { + headers: { + "Cache-Control": "max-age=" + maxAge + ", no-transform, public", + "Vary": "Accept-Encoding" + }, + gzippedOnly: true + }, + docs: { + headers: { + "Cache-Control": "public, must-revalidate, proxy-revalidate, max-age=0", + "Vary": "Accept-Encoding" + }, + gzippedOnly: true + } +}, +cdnpath = new RegExp(aws.cdn.bucket + "\/(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)","gi"); + +gulp.task("cdn", function () { + console.log("Uploading " + version + " to " + aws.cdn.bucket); + + // Upload to CDN + gulp.src(paths.upload) + .pipe(rename(function (path) { + path.dirname = path.dirname.replace(".", version); + })) + .pipe(gzip()) + .pipe(s3(aws.cdn, options.cdn)); +}); + +gulp.task("docs", function () { + console.log("Uploading " + version + " docs to " + aws.docs.bucket); + + // Replace versioned files in index.html + gulp.src([paths.docs.root + "index.html"]) + .pipe(replace(cdnpath, aws.cdn.bucket + "/" + version)) + .pipe(gzip()) + .pipe(s3(aws.docs, options.docs)); +}); + +gulp.task("publish", function () { + run("templates", tasks.js, tasks.less, "sprite", "cdn", "docs"); });
\ No newline at end of file diff --git a/package.json b/package.json index b60b2a6a..64a4de64 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "plyr", - "version": "1.0.17", + "version": "1.0.18", "description": "A simple HTML5 media player using custom controls", "homepage": "http://plyr.io", "main": "gulpfile.js", @@ -9,9 +9,13 @@ "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-replace": "^0.5.3", + "gulp-s3": "^0.3.0", "gulp-sass": "^1.3.3", "gulp-svgmin": "^1.0.0", "gulp-svgstore": "^5.0.0", @@ -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: @@ -39,11 +39,21 @@ bower install plyr ``` More info on setting up dependencies can be found in the [Bower Docs](http://bower.io/docs/creating-packages/#maintaining-dependencies) +### CDN +If you want to use our CDN, you can use the following. Currently it's HTTP only. + +```html +<link rel="stylesheet" href="http://cdn.plyr.io/1.0.18/plyr.css"> +<script src="http://cdn.plyr.io/1.0.18/plyr.js"></script> +``` + +You can also access the `sprite.svg` file at `http://cdn.plyr.io/1.0.18/sprite.svg`. + ### CSS 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 +72,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 +126,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** |