Massive update: moving to Middleman 4 with Gulp asset pipeline. Here …

…be dragons.

.gitignore

@@ -9,6 +9,7 @@
 
 # Ignore the build directory
 /build
+/.tmp
 
 # Ignore Sass' cache
 /.sass-cache
@@ -24,3 +25,4 @@ build.tgz
 
 # Ignore Bower components
 /components
+/node_modules

Gemfile

@@ -1,15 +1,5 @@
 source 'https://rubygems.org'
 
-gem "middleman", "~>3.2"
-gem "middleman-sprockets"
+gem "middleman", "~>4.0"
+gem "middleman-blog"
 gem "redcarpet"
-
-gem "haml"
-gem "sass"
-gem "compass"
-gem "susy"
-gem "modular-scale"
-gem "animation"
-
-# Deploying stuff
-gem "middleman-deploy", "~>1.0"

Gemfile.lock

@@ -7,146 +7,102 @@ GEM
       minitest (~> 5.1)
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
-    animation (0.1.alpha.3)
-      compass (>= 0.12.0)
-      sass (>= 3.2.0.alpha.95)
-    capybara (2.4.4)
-      mime-types (>= 1.16)
-      nokogiri (>= 1.3.3)
-      rack (>= 1.0.0)
-      rack-test (>= 0.5.4)
-      xpath (~> 2.0)
-    chunky_png (1.3.6)
+    addressable (2.4.0)
+    backports (3.6.8)
     coffee-script (2.4.1)
       coffee-script-source
       execjs
     coffee-script-source (1.10.0)
-    compass (1.0.3)
-      chunky_png (~> 1.2)
-      compass-core (~> 1.0.2)
-      compass-import-once (~> 1.0.5)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9)
-      sass (>= 3.3.13, < 3.5)
-    compass-core (1.0.3)
-      multi_json (~> 1.0)
-      sass (>= 3.3.0, < 3.5)
     compass-import-once (1.0.5)
       sass (>= 3.2, < 3.5)
+    concurrent-ruby (1.0.2)
+    contracts (0.13.0)
+    dotenv (2.1.1)
     erubis (2.7.0)
     execjs (2.7.0)
+    fast_blank (1.0.0)
+    fastimage (2.0.0)
+      addressable (~> 2)
     ffi (1.9.14)
     haml (4.0.7)
       tilt
-    hike (1.2.3)
-    hooks (0.4.1)
-      uber (~> 0.0.14)
+    hamster (3.0.0)
+      concurrent-ruby (~> 1.0)
+    hashie (3.4.4)
     i18n (0.7.0)
     json (1.8.3)
     kramdown (1.12.0)
     listen (3.0.8)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    middleman (3.4.1)
+    memoist (0.15.0)
+    middleman (4.1.10)
       coffee-script (~> 2.2)
-      compass (>= 1.0.0, < 2.0.0)
       compass-import-once (= 1.0.5)
-      execjs (~> 2.0)
       haml (>= 4.0.5)
       kramdown (~> 1.2)
-      middleman-core (= 3.4.1)
-      middleman-sprockets (>= 3.1.2)
+      middleman-cli (= 4.1.10)
+      middleman-core (= 4.1.10)
       sass (>= 3.4.0, < 4.0)
-      uglifier (~> 2.5)
-    middleman-core (3.4.1)
-      activesupport (~> 4.1)
+    middleman-blog (4.0.1)
+      addressable (~> 2.3)
+      middleman-core (>= 4.0.0)
+      tzinfo (>= 0.3.0)
+    middleman-cli (4.1.10)
+      thor (>= 0.17.0, < 2.0)
+    middleman-core (4.1.10)
+      activesupport (~> 4.2)
+      addressable (~> 2.3)
+      backports (~> 3.6)
       bundler (~> 1.1)
-      capybara (~> 2.4.4)
+      contracts (~> 0.13.0)
+      dotenv
       erubis
-      hooks (~> 0.3)
+      execjs (~> 2.0)
+      fast_blank
+      fastimage (~> 2.0)
+      hamster (~> 3.0)
+      hashie (~> 3.4)
       i18n (~> 0.7.0)
-      listen (~> 3.0.3)
-      padrino-helpers (~> 0.12.3)
+      listen (~> 3.0.0)
+      memoist (~> 0.14)
+      padrino-helpers (~> 0.13.0)
+      parallel
       rack (>= 1.4.5, < 2.0)
-      thor (>= 0.15.2, < 2.0)
-      tilt (~> 1.4.1, < 2.0)
-    middleman-deploy (1.0.0)
-      middleman-core (>= 3.2)
-      net-sftp
-      ptools
-    middleman-sprockets (3.4.2)
-      middleman-core (>= 3.3)
-      sprockets (~> 2.12.1)
-      sprockets-helpers (~> 1.1.0)
-      sprockets-sass (~> 1.3.0)
-    mime-types (3.1)
-      mime-types-data (~> 3.2015)
-    mime-types-data (3.2016.0521)
-    mini_portile2 (2.1.0)
+      sass (>= 3.4)
+      servolux
+      tilt (~> 1.4.1)
+      uglifier (~> 3.0)
     minitest (5.9.0)
-    modular-scale (2.1.1)
-      compass (>= 0.12.0)
-    multi_json (1.12.1)
-    net-sftp (2.1.2)
-      net-ssh (>= 2.6.5)
-    net-ssh (3.2.0)
-    nokogiri (1.6.8)
-      mini_portile2 (~> 2.1.0)
-      pkg-config (~> 1.1.7)
-    padrino-helpers (0.12.8)
+    padrino-helpers (0.13.3)
       i18n (~> 0.6, >= 0.6.7)
-      padrino-support (= 0.12.8)
-      tilt (~> 1.4.1)
-    padrino-support (0.12.8)
+      padrino-support (= 0.13.3)
+      tilt (>= 1.4.1, < 3)
+    padrino-support (0.13.3)
       activesupport (>= 3.1)
-    pkg-config (1.1.7)
-    ptools (1.3.3)
+    parallel (1.9.0)
     rack (1.6.4)
-    rack-test (0.6.3)
-      rack (>= 1.0)
     rb-fsevent (0.9.7)
     rb-inotify (0.9.7)
       ffi (>= 0.5.0)
     redcarpet (3.3.4)
     sass (3.4.22)
-    sprockets (2.12.4)
-      hike (~> 1.2)
-      multi_json (~> 1.0)
-      rack (~> 1.0)
-      tilt (~> 1.1, != 1.3.0)
-    sprockets-helpers (1.1.0)
-      sprockets (~> 2.0)
-    sprockets-sass (1.3.1)
-      sprockets (~> 2.0)
-      tilt (~> 1.1)
-    susy (2.2.12)
-      sass (>= 3.3.0, < 3.5)
+    servolux (0.12.0)
     thor (0.19.1)
     thread_safe (0.3.5)
     tilt (1.4.1)
     tzinfo (1.2.2)
       thread_safe (~> 0.1)
-    uber (0.0.15)
-    uglifier (2.7.2)
-      execjs (>= 0.3.0)
-      json (>= 1.8.0)
-    xpath (2.0.0)
-      nokogiri (~> 1.3)
+    uglifier (3.0.2)
+      execjs (>= 0.3.0, < 3)
 
 PLATFORMS
   ruby
 
 DEPENDENCIES
-  animation
-  compass
-  haml
-  middleman (~> 3.2)
-  middleman-deploy (~> 1.0)
-  middleman-sprockets
-  modular-scale
+  middleman (~> 4.0)
+  middleman-blog
   redcarpet
-  sass
-  susy
 
 BUNDLED WITH
    1.11.0

Gulpfile.js

@@ -0,0 +1,73 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var autoprefixer = require('gulp-autoprefixer');
+var imagemin = require('gulp-imagemin');
+var uglify = require('gulp-uglify');
+var concat = require('gulp-concat');
+var neat = require('node-neat').includePaths;
+
+var srcDir = './source';
+var dstDir = './.tmp';
+var bowerDir = './components/';
+
+var sassDir = srcDir + '/stylesheets/site.scss';
+var sassIncludeDir = [
+  bowerDir + '/modular-scale/stylesheets',
+  bowerDir + '/flickity/dist',
+  srcDir + '/stylesheets'
+];
+var sassOutDir = dstDir + '/stylesheets';
+
+var imagesDir = srcDir + '/images';
+var imagesOutDir = dstDir + '/images';
+
+var jsDir = srcDir + '/javascripts';
+var jsOutDir = dstDir + '/javascripts';
+
+var fontsDir = srcDir + '/fonts';
+var fontsOutDir = dstDir + '/fonts';
+
+gulp.task('sass', function() {
+  return gulp.src(sassDir)
+    .pipe(sass({
+      includePaths: sassIncludeDir.concat(neat),
+      style: 'expanded'
+    }).on('error', sass.logError))
+    .pipe(autoprefixer('last 2 versions'))
+    .pipe(gulp.dest(sassOutDir));
+});
+
+gulp.task('images', function() {
+  return gulp.src(imagesDir + '/**/*')
+    .pipe(imagemin())
+    .pipe(gulp.dest(imagesOutDir));
+});
+
+gulp.task('fonts', function() {
+  return gulp.src(fontsDir + '/**/*')
+    .pipe(gulp.dest(fontsOutDir));
+});
+
+gulp.task('javascripts', function() {
+  return gulp.src([
+      bowerDir + '/jquery/dist/jquery.js',
+      bowerDir + '/jribbble/dist/jribbble.js',
+      bowerDir + '/flickity/dist/flickity.pkgd.js',
+      jsDir + '/site.js'
+    ])
+    .pipe(concat('site.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest(jsOutDir))
+});
+
+gulp.task('watch', function() {
+  gulp.start('sass', 'images', 'fonts', 'javascripts');
+  gulp.watch(sassDir + '/**/*', ['sass']);
+  gulp.watch(jsDir + '/**/*', ['javascripts']);
+  gulp.watch(imagesDir + '/**/*', ['images']);
+  gulp.watch(fontsDir + '/**/*', ['fonts']);
+  gulp.watch('Gulpfile.js', ['sass', 'javascripts', 'images', 'fonts']);
+});
+
+gulp.task('default', ['watch']);
+gulp.task('build', ['sass', 'images', 'javascripts', 'fonts']);

bower.json

@@ -17,10 +17,11 @@
     "tests"
   ],
   "dependencies": {
-    "jquery": "^3.1.0",
-    "flickity": "^2.0.3"
   },
   "devDependencies": {
-    "jribbble": "^2.0.4"
+    "jquery": "^3.1.0",
+    "flickity": "^2.0.3",
+    "jribbble": "^2.0.4",
+    "modular-scale": "^2.1.3"
   }
 }

config.rb

@@ -4,12 +4,6 @@
 
 # Susy grids in Compass
 # First: gem install susy
-require 'susy'
-require 'animation'
-
-after_configuration do
-  sprockets.append_path File.join "#{root}", "components"
-end
 
 # Change Compass configuration
 # compass_config do |config|
@@ -52,29 +46,21 @@
 #   end
 # end
 
-activate :deploy do |deploy|
-  deploy.method        = :rsync
-  deploy.host          = 'srv.mariusz.cc'
-  deploy.path          = '/var/www/mariusz.cc'
-  deploy.build_before  = true # default: false
-  deploy.user          = 'mariusz'
-  # Optional Settings
-  # deploy.user  = 'tvaughan' # no default
-  # deploy.port  = 5309 # ssh port, default: 22
-  # deploy.clean = true # remove orphaned files on remote host, default: false
-  # deploy.flags = '-rltgoDvzO --no-p --del' # add custom flags, default: -avz
+activate :blog do |blog|
+  blog.prefix = "work"
 end
 
+activate :external_pipeline,
+  name: :gulp,
+  command: build? ? 'npm run production' : 'npm run gulp',
+  source: ".tmp"
+
 helpers do
   def page_class
     current_resource.url.sub('.html','').gsub('/','-')
   end
 end
 
-with_layout :work do
-  page "/work/*"
-end
-
 set :css_dir, 'stylesheets'
 
 set :js_dir, 'javascripts'
@@ -89,10 +75,10 @@ def page_class
 # Build-specific configuration
 configure :build do
   # For example, change the Compass output style for deployment
-  activate :minify_css
+  # activate :minify_css
 
   # Minify Javascript on build
-  activate :minify_javascript
+  # activate :minify_javascript
 
   # Enable cache buster
   # activate :cache_buster