ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Publishing to AWS

Browse Source
This commit is contained in:
Sam Potts 2015-03-01 23:23:08 +11:00
parent dc10139f80
commit 4314853640
11 changed files with 70 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

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

0
dist/css/plyr.css → dist/plyr.css vendored
View File

0
dist/js/plyr.js → dist/plyr.js vendored
View File

0
docs/dist/css/docs.css → docs/dist/docs.css vendored
View File

1
docs/dist/docs.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
docs/dist/js/docs.js vendored
View File

File diff suppressed because one or more lines are too long

0
docs/dist/js/templates.js → docs/dist/templates.js vendored
View File

6
docs/index.html
View File

@ -8,7 +8,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="../dist/css/plyr.css"> <link rel="stylesheet" href="plyr/css/plyr.css">
<!-- Docs styles --> <!-- Docs styles -->
<link rel="stylesheet" href="dist/css/docs.css"> <link rel="stylesheet" href="dist/css/docs.css">
@ -67,11 +67,11 @@
<!-- Load SVG defs --> <!-- Load SVG defs -->
<!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store --> <!-- You should bundle all SVG/Icons into one file using a build tool such as gulp and svg store -->
<script> <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> </script>
<!-- Plyr core script --> <!-- Plyr core script -->
<script src="../dist/js/plyr.js"></script> <script src="plyr/js/plyr.js"></script>
<!-- Docs script --> <!-- Docs script -->
<script src="dist/js/docs.js"></script> <script src="dist/js/docs.js"></script>

88
gulpfile.js
View File

@ -16,7 +16,10 @@ var fs = require("fs"),
prefix = require("gulp-autoprefixer"), prefix = require("gulp-autoprefixer"),
svgstore = require("gulp-svgstore"), svgstore = require("gulp-svgstore"),
svgmin = require("gulp-svgmin"), 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, var root = __dirname,
paths = { paths = {
@ -29,11 +32,7 @@ var root = __dirname,
sprite: path.join(root, "src/sprite/*.svg") sprite: path.join(root, "src/sprite/*.svg")
}, },
// Output paths // Output paths
output: { output: path.join(root, "dist/")
js: path.join(root, "dist/js/"),
css: path.join(root, "dist/css/"),
sprite: path.join(root, "dist/")
}
}, },
docs: { docs: {
// Source paths // Source paths
@ -43,10 +42,7 @@ var root = __dirname,
templates: path.join(root, "docs/src/templates/*.html") templates: path.join(root, "docs/src/templates/*.html")
}, },
// Output paths // Output paths
output: { output: path.join(root, "docs/dist/")
js: path.join(root, "docs/dist/js/"),
css: path.join(root, "docs/dist/css/")
}
} }
}, },
@ -58,7 +54,8 @@ tasks = {
}, },
// Fetch bundles from JSON // 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 // Load json
function loadJSON(path) { function loadJSON(path) {
@ -66,7 +63,7 @@ function loadJSON(path) {
} }
var build = { var build = {
js: function (files, bundle, output) { js: function (files, bundle) {
for (var key in files) { for (var key in files) {
(function(key) { (function(key) {
var name = "js-" + key; var name = "js-" + key;
@ -77,12 +74,12 @@ var build = {
.src(bundles[bundle].js[key]) .src(bundles[bundle].js[key])
.pipe(concat(key)) .pipe(concat(key))
.pipe(uglify()) .pipe(uglify())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
less: function(files, bundle, output) { less: function(files, bundle) {
for (var key in files) { for (var key in files) {
(function (key) { (function (key) {
var name = "less-" + key; var name = "less-" + key;
@ -96,12 +93,12 @@ var build = {
.pipe(concat(key)) .pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: true })) .pipe(prefix(["last 2 versions"], { cascade: true }))
.pipe(minify()) .pipe(minify())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
sass: function(files, bundle, output) { sass: function(files, bundle) {
for (var key in files) { for (var key in files) {
(function (key) { (function (key) {
var name = "sass-" + key; var name = "sass-" + key;
@ -115,51 +112,51 @@ var build = {
.pipe(concat(key)) .pipe(concat(key))
.pipe(prefix(["last 2 versions"], { cascade: true })) .pipe(prefix(["last 2 versions"], { cascade: true }))
.pipe(minify()) .pipe(minify())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths[bundle].output));
}); });
})(key); })(key);
} }
}, },
sprite: function(source, output) { sprite: function() {
// Process Icons // Process Icons
gulp.task("sprite", function () { gulp.task("sprite", function () {
return gulp return gulp
.src(source) .src(paths.plyr.src.sprite)
.pipe(svgmin({ .pipe(svgmin({
plugins: [{ plugins: [{
removeDesc: true removeDesc: true
}] }]
})) }))
.pipe(svgstore()) .pipe(svgstore())
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths.plyr.output));
}); });
}, },
templates: function(source, output) { templates: function() {
// Build templates // Build templates
gulp.task("templates", function () { gulp.task("templates", function () {
return gulp return gulp
.src(source) .src(paths.docs.src.templates)
.pipe(hogan("templates.js", { .pipe(hogan("templates.js", {
wrapper: false, wrapper: false,
templateName: function (file) { templateName: function (file) {
return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative)); return path.basename(file.relative.replace(/\\/g, "-"), path.extname(file.relative));
} }
})) }))
.pipe(gulp.dest(output)); .pipe(gulp.dest(paths.docs.output));
}); });
} }
}; };
// Plyr core files // Plyr core files
build.js(bundles.plyr.js, "plyr", paths.plyr.output.js); build.js(bundles.plyr.js, "plyr");
build.less(bundles.plyr.less, "plyr", paths.plyr.output.css); build.less(bundles.plyr.less, "plyr");
build.sass(bundles.plyr.sass, "plyr", paths.plyr.output.css); build.sass(bundles.plyr.sass, "plyr");
build.sprite(paths.plyr.src.sprite, paths.plyr.output.sprite); build.sprite();
// Docs files // Docs files
build.templates(paths.docs.src.templates, paths.docs.output.js); build.templates();
build.less(bundles.docs.less, "docs", paths.docs.output.css); build.less(bundles.docs.less, "docs");
build.js(bundles.docs.js, "docs", paths.docs.output.js); build.js(bundles.docs.js, "docs");
// Default gulp task // Default gulp task
gulp.task("default", function(){ 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.less, tasks.less);
gulp.watch(paths.docs.src.templates, "js"); 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 () {
});

3
package.json
View File

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

8
readme.md
View File

@ -30,7 +30,7 @@ If you have any cool ideas or features, please let me know by [creating an issue
## Implementation ## 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 ### Bower
If bower is your thang, you can grab Plyr using: 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. 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 ```html
<link rel="stylesheet" href="dist/css/plyr.css"> <link rel="stylesheet" href="dist/plyr.css">
``` ```
### SVG ### 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; c.innerHTML=a.responseText;
b.insertBefore(c,b.childNodes[0]) b.insertBefore(c,b.childNodes[0])
} }
})(document,"dist/svg/sprite.svg"); })(document,"dist/sprite.svg");
</script> </script>
``` ```
More info on SVG sprites here: 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. Much of the behaviour of the player is configurable when initialising the library. Below is an example of a default instance.
```html ```html
<script src="dist/js/plyr.js"></script> <script src="dist/plyr.js"></script>
<script> <script>
plyr.setup({ plyr.setup({
html: **your controls html** html: **your controls html**