Slide 1
Slide 1 text
WELCOME TO
COPENHAGEN FRONTENDERS
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
STATIC WEB SITES
WITH GULP & AWS
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
WHAT ARE THE PROBLEMS?
▸ No toolchain control
▸ Limited by Liquid
▸ Updates are infrequent
▸ Compiler is integrated
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
I CAN MAKE THAT
Slide 16
Slide 16 text
AUTOMATE WORKFLOWS
▸ Compile Sass / Coffeescript
▸ Minify Javascript / CSS
▸ Compress image files
▸ Generate non retina assets
▸ Automatically regenerate on save
▸ Reload web browser
Slide 17
Slide 17 text
INSTALLING GULP
$ npm install gulp
gulpfile.js
var gulp = require('gulp');
gulp.task('hello-world', function() {
console.log("Hello World");
})
$ gulp
Hello World
Slide 18
Slide 18 text
INSTALLING GULP
$ npm install gulp coffee-script
gulpfile.coffescript
gulp = require 'gulp'
gulp.task 'hello-world', ->
console.log "Hello World"
$ gulp
Hello World
Slide 19
Slide 19 text
COMPILE SASS
gulp = require 'gulp'
sass = require 'gulp-sass'
gulp.task 'compile-sass', ->
gulp.src("./sass")
.pipe(sass())
.pipe(gulp.dest('./css'))
Slide 20
Slide 20 text
COMPILE SASS WITH SOURCEMAPS
gulp = require 'gulp'
sass = require 'gulp-sass'
sourcemaps = require 'gulp-sourcemaps'
gulp.task 'compile-sass', ->
gulp.src("./sass")
.pipe(sass())
.pipe(sourcemaps.init())
.pipe(sourcemaps.write('./maps'))
.pipe(gulp.dest('./css'))
Slide 21
Slide 21 text
WATCHING FOR CHANGES
gulp.task 'watch', ->
gulp.watch './sass', ['compile-sass']
Slide 22
Slide 22 text
WATCHING FOR CHANGES & RELOADING
reload = require 'gulp-livereload'
gulp.task 'watch', ->
reload.listen '9091'
gulp.watch './sass', ['compile-sass']
index.html
Slide 23
Slide 23 text
TEMPLATES WITH
HANDLEBARS
{{> header}}
{{#each apps}}
{{/each}}
{{> footer}}
{{this.name}}
{{img this.icon_url}}Slide 24
Slide 24 text
TEMPLATES WITH
HANDLEBARS
opts = { helpers: {
img: (path, retina = true, cls = null) ->
rp = retinaPath(path)
str = "
gulp.src(paths.handlebars)
.pipe(handlebars(data, opts))
.pipe(gulp.dest(build_path))
Slide 25
Slide 25 text
DEPLOYING TO S3
$ gem install s3_website
Slide 26
Slide 26 text
DEPLOYING TO S3
s3_website.yml
s3_id: <%= ENV['S3_ACCESS_KEY_ID'] %>
s3_secret: <%= ENV['S3_SECRET_ACCESS_KEY'] %>
s3_bucket: awesome-bucket-name
site: build
max_age:
"*": 300
gzip: true
cloudfront_distribution_config:
aliases:
quantity: 1
items:
CNAME: awesomewebsite.tld
Slide 27
Slide 27 text
DEPLOYING TO S3
.env
S3_ACCESS_KEY_ID=YADAYADAYADA
S3_SECRET_ACCESS_KEY=TROLOLOLOLO
Watch the magic happen
$ gulp && s3_website push
Slide 28
Slide 28 text
STARTOVER
GIHUB.COM/KSMANDERSEN/STARTOVER
Slide 29
Slide 29 text
DEMO
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content