Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Static Websites with Gulp & AWS

Static Websites with Gulp & AWS

This talk was given at the first Copenhagen Frontenders event on April 22nd, 2015.

I talked about how we use Gulp and Amazon Web Services to build and host our websites at Robocat.

Kristian Andersen

April 22, 2015
Tweet

More Decks by Kristian Andersen

Other Decks in Programming

Transcript

  1. WHAT ARE THE PROBLEMS? ▸ No toolchain control ▸ Limited

    by Liquid ▸ Updates are infrequent ▸ Compiler is integrated
  2. AUTOMATE WORKFLOWS ▸ Compile Sass / Coffeescript ▸ Minify Javascript

    / CSS ▸ Compress image files ▸ Generate non retina assets ▸ Automatically regenerate on save ▸ Reload web browser
  3. INSTALLING GULP $ npm install gulp gulpfile.js var gulp =

    require('gulp'); gulp.task('hello-world', function() { console.log("Hello World"); }) $ gulp Hello World
  4. INSTALLING GULP $ npm install gulp coffee-script gulpfile.coffescript gulp =

    require 'gulp' gulp.task 'hello-world', -> console.log "Hello World" $ gulp Hello World
  5. COMPILE SASS gulp = require 'gulp' sass = require 'gulp-sass'

    gulp.task 'compile-sass', -> gulp.src("./sass") .pipe(sass()) .pipe(gulp.dest('./css'))
  6. 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'))
  7. WATCHING FOR CHANGES & RELOADING reload = require 'gulp-livereload' gulp.task

    'watch', -> reload.listen '9091' gulp.watch './sass', ['compile-sass'] index.html <script src="//localhost:9091/livereload.js"></script>
  8. TEMPLATES WITH HANDLEBARS {{> header}} <div class="products"> {{#each apps}} <div

    class="product"> <h2>{{this.name}}</h2> {{img this.icon_url}} </div> {{/each}} </div> {{> footer}}
  9. TEMPLATES WITH HANDLEBARS opts = { helpers: { img: (path,

    retina = true, cls = null) -> rp = retinaPath(path) str = "<img src=\"#{config.imgpath}/#{path}\"" if retina str += " data-at2x=\"#{config.imgpath}/#{rp}\"" if typeof cls == 'string' str += " class=\"#{cls}\"" str += ">" return str }} gulp.task 'html', -> gulp.src(paths.handlebars) .pipe(handlebars(data, opts)) .pipe(gulp.dest(build_path))
  10. 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