Assets

.gitignore

@@ -4,3 +4,6 @@ cache/**/*
 config/database.yml
 coverage/**/*
 db/test.sqlite3
+bower_components
+node_modules
+build/

Gemfile

@@ -15,7 +15,6 @@ gem 'rack-fiber_pool'
 gem 'em-resolv-replace'
 gem 'mime-types'
 gem 'haml'
-gem 'sass'
 gem 'rack-test'
 gem 'minitest'
 gem 'simplecov', '>= 0.4.0', :require => false, :group => :test

Gemfile.lock

@@ -88,7 +88,6 @@ GEM
       rack-test (~> 0.6.2)
       ripl (>= 0.7.0)
     rufus-tokyo (1.0.7)
-    sass (3.4.16)
     simplecov (0.10.0)
       docile (~> 1.1.0)
       json (~> 1.8)
@@ -138,7 +137,6 @@ DEPENDENCIES
   rack-fiber_pool
   rack-test
   rake
-  sass
   simplecov (>= 0.4.0)
   sinatra
   sinatra-activerecord

bower.json

@@ -0,0 +1,20 @@
+{
+  "name": "fp-sin",
+  "version": "0.0.0",
+  "homepage": "https://github.com/zquestz/fp-sin",
+  "authors": [
+    "John Skopis <jspam@skopis.com>"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "fontawesome": "~4.3.0"
+  }
+}
+

config.ru

@@ -1,6 +1,17 @@
+# Raise an error if we don't have a compatible ruby version.
+raise LoadError, 'Ruby 1.9.2 required' if RUBY_VERSION < '1.9.2'
+
 # Add the root to the load path.
 $LOAD_PATH << File.dirname(__FILE__)
 
+if 'development' == ENV['RACK_ENV']
+  # This will exit when the server stops but there should probably be some kind
+  # of locking mechanism to ensure there's only one watcher running
+  fork do
+    %x{ PATH=$(npm bin):$PATH gulp watch }
+  end
+end
+
 # Startup the app
 require 'fp_sin'
 run FpSinApp

fp_sin.rb

@@ -4,13 +4,15 @@
 # thin -R config.ru start
 # http://localhost:3000/
 
-# Raise an error if we don't have a compatible ruby version.
-raise LoadError, 'Ruby 1.9.2 required' if RUBY_VERSION < '1.9.2'
-
 # Add lib directory to load path
 $LOAD_PATH << File.join(File.dirname(__FILE__), 'lib')
 
+# Require 3rdparty deps
 require "dependencies"
+# Require our libs
+require 'cache_proxy'
+require 'hashify'
+require 'helpers'
 
 # Main application class.
 class FpSinApp < Sinatra::Base
@@ -21,6 +23,10 @@ class FpSinApp < Sinatra::Base
   set :cache_timeout, 120
   set :database_file, File.join('config', 'database.yml')
   set :cache, settings.caching ? Dalli::Client.new(settings.memcached, {:namespace => 'fps_', :expires_in => settings.cache_timeout}) : CacheProxy.new()
+  set :sinatra_authentication_view_path, "#{File.join(Pathname(__FILE__).dirname.expand_path, "views", "auth")}"
+  set :public_folder, File.join(File.dirname(__FILE__), 'public')
+  set :static_cache_control, [:public, :must_revalidate,
+                              :max_age => (settings.cache_timeout * 10)]
 
   use Rack::FiberPool, :size => 100 unless test?
   use Rack::Session::Cookie, :key => 'rack.session',
@@ -35,18 +41,12 @@ class FpSinApp < Sinatra::Base
   register Sinatra::Flash
   register Sinatra::SinatraAuthentication
 
-  set :sinatra_authentication_view_path, "#{File.join(Pathname(__FILE__).dirname.expand_path, "views", "auth")}"
+  helpers ApplicationHelpers
 
   get '/' do
     haml :index
   end
-
-  get '/main.css' do
-    cache_control :public, :must_revalidate, :max_age => (settings.cache_timeout * 10)
-    set_content_type(:css)
-    scss :main
-  end
-
+
   # Page not found handler
   not_found do
     flash.now[:error] = t('http_not_found')

gulpfile.js

@@ -0,0 +1,137 @@
+var gulp = require('gulp');
+var uglify = require('gulp-uglify');
+var cssmin = require('gulp-minify-css');
+var bower = require('gulp-bower-files');
+var include = require('gulp-include');
+var concat = require('gulp-concat');
+var plumber = require('gulp-plumber');
+var sass = require('gulp-sass');
+var neat = require('node-neat');
+
+var gulpFilter = require('gulp-filter');
+var watch = require('gulp-watch');
+var rename = require('gulp-rename');
+var react = require('gulp-react');
+
+var reactify = require('reactify');
+var browserify = require('browserify');
+var source = require('vinyl-source-stream');
+
+var replace = require('gulp-replace');
+var debowerify = require('debowerify');
+var addsrc = require('gulp-add-src');
+
+var watch = require('gulp-watch');
+var batch = require('gulp-batch');
+
+var src = {
+  bower: 'bower_components',
+  sass: [ 'assets/sass/**/*.scss', ],
+  js: ['assets/js/**/*.js',],
+  react: ['./src/app.jsx'],
+  bower: ['bower.json', '.bowerrc']
+};
+
+var dist = 'public';
+
+var dist = {
+  js: 'public/js',
+  css: 'public/css',
+  fonts: 'public/fonts',
+};
+
+gulp.task('react', function() {
+  browserify(src.react)
+    .transform(reactify)
+    .transform(debowerify)
+    .bundle()
+    .pipe(source('bundle.js'))
+    .pipe(gulp.dest(dist.js));
+});
+
+gulp.task('sass', function() {
+  return gulp.src(src.sass)
+  .pipe(plumber())
+  .pipe(sass({
+    includePaths: require('node-neat').with(
+        'bower_components/bootstrap-sass-official/assets/stylesheets',
+        'bower_components/fontawesome/scss')
+  }))
+  .pipe(gulp.dest(dist.css))
+});
+
+gulp.task('js', function() {
+  return gulp.src(src.js)
+  .pipe(include())
+  .pipe(concat('app.js'))
+  .pipe(gulp.dest(dist.js))
+});
+
+gulp.task('vendor-js', function() {
+  var jsFilter = gulpFilter('**/*.js')
+  return bower()
+  .pipe(jsFilter)
+  .pipe(concat('vendor.js'))
+  .pipe(gulp.dest(dist.js))
+});
+
+gulp.task('vendor-css', function() {
+  var cssFilter = gulpFilter('**/*.css')
+  return bower()
+  .pipe(cssFilter)
+  .pipe(concat('vendor.css'))
+  .pipe(gulp.dest(dist.css))
+});
+
+gulp.task('bower', function() {
+  var fontFilter = gulpFilter('**/*.{eot,woff,woff2,ttf,svg}')
+  return bower()
+  .pipe(fontFilter)
+  .pipe(rename(function(path) {
+
+    if (~path.dirname.indexOf('fonts')) {
+      if (~path.dirname.indexOf('bootstrap')) {
+        path.dirname = '/bootstrap'
+      } else {
+        path.dirname = '/'
+      }
+    }
+
+  }))
+  .pipe(gulp.dest(dist.fonts))
+});
+
+gulp.task('compress-css', ['sass', 'vendor-css'], function() {
+  var filter = gulpFilter(['*', '!*.min.css']);
+  return gulp.src(dist.css + '/*.css')
+  .pipe(filter)
+  .pipe(rename({suffix: '.min'}))
+  .pipe(cssmin())
+  .pipe(gulp.dest(dist.css))
+});
+
+gulp.task('compress-js', ['js', 'vendor-js'], function() {
+  var filter = gulpFilter(['*', '!*.min.js']);
+  return gulp.src(dist.js + '/*.js')
+  .pipe(filter)
+  .pipe(rename({suffix: '.min'}))
+  .pipe(uglify())
+  .pipe(gulp.dest(dist.js))
+});
+
+gulp.task('watch-css', function () {
+  watch(src.sass, batch(function (events, done) {
+    gulp.start('sass', done);
+  }));
+});
+
+gulp.task('watch-js', function () {
+  watch(src.js, batch(function (events, done) {
+    gulp.start('js', done);
+  }));
+});
+
+gulp.task('compress', ['compress-css', 'compress-js']);
+gulp.task('default', ['react', 'bower', 'sass', 'js', 'vendor-css', 'vendor-js']);
+gulp.task('build', ['default', 'compress']);
+gulp.task('watch', ['watch-js', 'watch-css']);

lib/dependencies.rb

@@ -3,18 +3,12 @@
 require 'rack/session/cookie'
 require 'sinatra'
 require 'sinatra/flash'
-require 'helpers'
-require 'tilt/haml'
-require 'tilt/sass'
 require 'sinatra/activerecord'
 require 'sinatra/i18n'
-require 'sass'
-require 'cache_proxy'
 require 'resolv'
 require 'em-resolv-replace' unless test?
 require 'mime/types'
 require 'dalli'
-require 'hashify'
 require 'em-synchrony/em-http'
 require 'em-synchrony/activerecord'
 require 'sinatra-authentication'

lib/helpers.rb

@@ -1,45 +1,51 @@
-require 'sinatra/base'
+module ApplicationHelpers
+  # Automatically sets content-type header by file extension.
+  def set_content_type(format)
+    mime_type = MIME::Types.of("format.#{format}")
+      .first
+      .content_type rescue 'text/html'
+    content_type mime_type, :charset => 'utf-8'
+  end
 
-module Sinatra
-  module Helpers
-    # Automatically sets content-type header by file extension.
-    def set_content_type(format)
-      mime_type = MIME::Types.of("format.#{format}").first.content_type rescue 'text/html'
-      content_type mime_type, :charset => 'utf-8'
-    end
-
-    # Flushes memcache
-    def flush_cache
-      settings.cache.flush
-    end
+  # Flushes memcache
+  def flush_cache
+    settings.cache.flush
+  end
 
-    # Current url of the application using rack env.
-    def current_url
-      @current_url ||= "#{request.env['rack.url_scheme']}://#{request.env['HTTP_HOST']}"
+  # Current url of the application using rack env.
+  def current_url
+    @current_url ||= "#{request.env['rack.url_scheme']}://#{request.env['HTTP_HOST']}"
+  end
+
+  # Render login bar. Taken from sinatra-authentication, but added I18n translations.
+  def render_login(html_attributes = {:class => ""})
+    css_classes = html_attributes.delete(:class)
+    parameters = ''
+    html_attributes.each_pair do |attribute, value|
+      parameters += %^#{attribute}="#{value}" ^
     end
 
-    # Render login bar. Taken from sinatra-authentication, but added I18n translations.
-    def render_login(html_attributes = {:class => ""})
-      css_classes = html_attributes.delete(:class)
-      parameters = ''
-      html_attributes.each_pair do |attribute, value|
-        parameters += %^#{attribute}="#{value}" ^
-      end
+    result = "<div id='sinatra-authentication-login-logout'>"
+    if logged_in?
+      logout_parameters = html_attributes
+      logout_parameters.delete(:rel)
+      result += "<a href='/users/#{current_user.id}/edit' class='#{css_classes} sinatra-authentication-edit' #{parameters}>#{t('edit_profile')}</a> - "
+      result += "<a href='/logout' class='#{css_classes} sinatra-authentication-logout' #{logout_parameters}>#{t('logout')}</a>"
+    else
+      result += "<a href='/signup' class='#{css_classes} sinatra-authentication-signup' #{parameters}>#{t('sign_up')}</a> - "
+      result += "<a href='/login' class='#{css_classes} sinatra-authentication-login' #{parameters}>#{t('login')}</a>"
+    end
 
-      result = "<div id='sinatra-authentication-login-logout'>"
-      if logged_in?
-        logout_parameters = html_attributes
-        logout_parameters.delete(:rel)
-        result += "<a href='/users/#{current_user.id}/edit' class='#{css_classes} sinatra-authentication-edit' #{parameters}>#{t('edit_profile')}</a> - "
-        result += "<a href='/logout' class='#{css_classes} sinatra-authentication-logout' #{logout_parameters}>#{t('logout')}</a>"
-      else
-        result += "<a href='/signup' class='#{css_classes} sinatra-authentication-signup' #{parameters}>#{t('sign_up')}</a> - "
-        result += "<a href='/login' class='#{css_classes} sinatra-authentication-login' #{parameters}>#{t('login')}</a>"
-      end
+    result += "</div>"
+  end
 
-      result += "</div>"
+  # TODO: move to ViewHelpers
+  # TODO: use manifest/versioning
+  def url_for(path)
+    if Sinatra::Application.production?
+      path.gsub(/\.(css|js)$/, ".min.\\1")
+    else
+      path
     end
   end
-
-  helpers Helpers
 end