Make collectstatic compile .coffee files, and preserve the askbot workflow using guard

Gemfile

@@ -1,10 +1,8 @@
 source :rubygems
 
 gem 'guard', '~> 1.0.3'
-gem 'guard-process', '~> 1.0.3'
-gem 'guard-coffeescript', '~> 0.6.0'
 gem 'sass', '3.1.15'
-gem 'guard-sass', :github => 'sikachu/guard-sass'
 gem 'bourbon', '~> 1.3.6'
 gem 'libnotify', '~> 0.7.2'
 gem 'ruby_gntp', '~> 0.3.4'
+gem 'guard-rake', '0.0.5'

Gemfile.lock

@@ -1,38 +1,19 @@
-GIT
-  remote: git://github.com/sikachu/guard-sass.git
-  revision: 2a646996d7fdaa2fabf5f65ba700bd8b02f14c1b
-  specs:
-    guard-sass (0.6.0)
-      guard (>= 0.4.0)
-      sass (>= 3.1)
-
 GEM
   remote: http://rubygems.org/
   specs:
     bourbon (1.3.6)
       sass (>= 3.1)
-    coffee-script (2.2.0)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.3.3)
-    execjs (1.3.2)
-      multi_json (~> 1.0)
     ffi (1.0.11)
     guard (1.0.3)
       ffi (>= 0.5.0)
       thor (>= 0.14.6)
-    guard-coffeescript (0.6.0)
-      coffee-script (>= 2.2.0)
-      guard (>= 0.8.3)
-    guard-process (1.0.3)
-      ffi (~> 1.0.9)
-      guard (>= 0.4.2)
-      spoon (~> 0.0.1)
+    guard-rake (0.0.5)
+      guard
+      rake
     libnotify (0.7.2)
-    multi_json (1.3.5)
+    rake (0.9.2.2)
     ruby_gntp (0.3.4)
     sass (3.1.15)
-    spoon (0.0.1)
     thor (0.15.2)
 
 PLATFORMS
@@ -41,9 +22,7 @@ PLATFORMS
 DEPENDENCIES
   bourbon (~> 1.3.6)
   guard (~> 1.0.3)
-  guard-coffeescript (~> 0.6.0)
-  guard-process (~> 1.0.3)
-  guard-sass!
+  guard-rake (= 0.0.5)
   libnotify (~> 0.7.2)
   ruby_gntp (~> 0.3.4)
   sass (= 3.1.15)

Guardfile

@@ -1,19 +1,3 @@
-require 'bourbon'
-
-# Helper method
-def production?
-  @@options[:group].include? 'production'
-end
-
-guard :coffeescript, :name => :jasmine, :input => 'templates/coffee/spec', :all_on_start => production?
-
-guard :coffeescript, :input => 'templates/coffee/src', :noop => true
-guard :process, :name => :coffeescript, :command => "coffee -j static/js/application.js -c templates/coffee/src" do
-  watch(%r{^templates/coffee/src/(.+)\.coffee$})
-end
-
-if production?
-  guard :sass, :input => 'templates/sass', :output => 'static/css', :style => :compressed, :all_on_start => true
-else
-  guard :sass, :input => 'templates/sass', :output => 'static/css', :style => :nested, :line_numbers => true
+guard :rake, :task => :collectstatic, :run_on_all => true, :run_on_start => true do
+    watch(%r{^static/.+(.scss|.coffee)$})
 end

envs/common.py

@@ -153,7 +153,7 @@ MANAGERS = ADMINS
 # Static content
 STATIC_URL = '/static/'
 ADMIN_MEDIA_PREFIX = '/static/admin/'
-STATIC_ROOT = ENV_ROOT / "staticfiles" # We don't run collectstatic -- this is to appease askbot checks
+STATIC_ROOT = ENV_ROOT / "staticfiles" 
 
 # FIXME: We should iterate through the courses we have, adding the static 
 #        contents for each of them. (Right now we just use symlinks.)
@@ -217,7 +217,7 @@ SIMPLE_WIKI_REQUIRE_LOGIN_EDIT = True
 SIMPLE_WIKI_REQUIRE_LOGIN_VIEW = False
 
 ################################# Jasmine ###################################
-JASMINE_TEST_DIRECTORY = PROJECT_ROOT + '/templates/coffee'
+JASMINE_TEST_DIRECTORY = PROJECT_ROOT + '/static/coffee'
 
 ################################# Middleware ###################################
 # List of finder classes that know how to find static files in
@@ -266,36 +266,49 @@ STATICFILES_STORAGE = 'pipeline.storage.PipelineCachedStorage'
 
 PIPELINE_CSS = {
     'application': {
-        'source_filenames': ['css/application.scss'],
+        'source_filenames': ['sass/application.scss'],
         'output_filename': 'css/application.css',
     },
     'marketing': {
-        'source_filenames': ['css/marketing.scss'],
+        'source_filenames': ['sass/marketing.scss'],
         'output_filename': 'css/marketing.css',
     },
     'marketing-ie': {
-        'source_filenames': ['css/marketing-ie.scss'],
+        'source_filenames': ['sass/marketing-ie.scss'],
         'output_filename': 'css/marketing-ie.css',
     },
     'print': {
-        'source_filenames': ['css/print.scss'],
+        'source_filenames': ['sass/print.scss'],
         'output_filename': 'css/print.css',
     }
 }
 
+PIPELINE_JS = {
+    'application': {
+        'source_filenames': [
+            'coffee/src/calculator.coffee',
+            'coffee/src/courseware.coffee',
+            'coffee/src/feedback_form.coffee',
+            'coffee/src/main.coffee'
+        ],
+        'output_filename': 'js/application.js'
+    }
+}
+
 PIPELINE_COMPILERS = [
-    'pipeline.compilers.sass.SASSCompiler'
+    'pipeline.compilers.sass.SASSCompiler',
+    'pipeline.compilers.coffee.CoffeeScriptCompiler',
 ]
 
-PIPELINE_SASS_ARGUMENTS = '-r {proj_dir}/sass/bourbon/lib/bourbon.rb'.format(proj_dir=PROJECT_ROOT)
+PIPELINE_SASS_ARGUMENTS = '-r {proj_dir}/static/sass/bourbon/lib/bourbon.rb'.format(proj_dir=PROJECT_ROOT)
 
 PIPELINE_CSS_COMPRESSOR = None
 
 STATICFILES_IGNORE_PATTERNS = (
-    "*.scss",
-    "*.rb",
+    "sass/*",
+    "coffee/*",
     "*.py",
-    "*.pyc",
+    "*.pyc"
 )
 
 ################################### APPS #######################################

envs/dev.py

@@ -82,3 +82,9 @@ FILE_UPLOAD_HANDLERS = (
     'django.core.files.uploadhandler.MemoryFileUploadHandler',
     'django.core.files.uploadhandler.TemporaryFileUploadHandler',
 )
+
+########################### PIPELINE #################################
+
+PIPELINE_COFFEE_SCRIPT_BINARY = 'coffee'
+PIPELINE_JS_COMPRESSOR = None
+PIPELINE_CSS_COMPRESSOR = None

rakefile

@@ -59,11 +59,18 @@ task :test => REPORT_DIR do
     sh("#{django_admin} test --settings=envs.test --pythonpath=. $(ls djangoapps)")
 end
 
-desc "Start a local server with the specified environment (defaults to dev). Other useful environments are devplus (for dev testing with a real local database)"
-task :runserver, :env do |t, args|
+desc "Collect static files"
+task :collectstatic, :env do |t, args|
     args.with_defaults(:env => 'dev')
     django_admin = ENV['DJANGO_ADMIN_PATH'] || select_executable('django-admin.py', 'django-admin')
-    sh("#{django_admin} runserver --settings=envs.#{args.env} --pythonpath=.")
+    sh("#{django_admin} collectstatic --settings=envs.#{args.env} --pythonpath=. --noinput --link")
+end
+
+desc "Start a local server with the specified environment (defaults to dev). Other useful environments are devplus (for dev testing with a real local database)"
+task :runserver, [:env] => [:collectstatic] do |t, args|
+    args.with_defaults(:env => 'dev')
+    django_admin = ENV['DJANGO_ADMIN_PATH'] || select_executable('django-admin.py', 'django-admin')
+    sh("#{django_admin} runserver --settings=envs.#{args.env} --pythonpath=. --nostatic")
 end
 
 task :package do

static/coffee/src/.gitignore

@@ -0,0 +1 @@
+*.js

static/css

@@ -1 +0,0 @@
-../sass

static/js/application.js

@@ -1,121 +0,0 @@
-// Generated by CoffeeScript 1.3.2-pre
-(function() {
-
-  window.Calculator = (function() {
-
-    function Calculator() {}
-
-    Calculator.bind = function() {
-      var calculator;
-      calculator = new Calculator;
-      $('.calc').click(calculator.toggle);
-      $('form#calculator').submit(calculator.calculate).submit(function(e) {
-        return e.preventDefault();
-      });
-      return $('div.help-wrapper a').hover(calculator.helpToggle).click(function(e) {
-        return e.preventDefault();
-      });
-    };
-
-    Calculator.prototype.toggle = function() {
-      $('li.calc-main').toggleClass('open');
-      $('#calculator_wrapper #calculator_input').focus();
-      return $('.calc').toggleClass('closed');
-    };
-
-    Calculator.prototype.helpToggle = function() {
-      return $('.help').toggleClass('shown');
-    };
-
-    Calculator.prototype.calculate = function() {
-      return $.getJSON('/calculate', {
-        equation: $('#calculator_input').val()
-      }, function(data) {
-        return $('#calculator_output').val(data.result);
-      });
-    };
-
-    return Calculator;
-
-  })();
-
-  window.Courseware = (function() {
-
-    function Courseware() {}
-
-    Courseware.bind = function() {
-      return this.Navigation.bind();
-    };
-
-    Courseware.Navigation = (function() {
-
-      function Navigation() {}
-
-      Navigation.bind = function() {
-        var active, navigation;
-        if ($('#accordion').length) {
-          navigation = new Navigation;
-          active = $('#accordion ul:has(li.active)').index('#accordion ul');
-          $('#accordion').bind('accordionchange', navigation.log).accordion({
-            active: active >= 0 ? active : 1,
-            header: 'h3',
-            autoHeight: false
-          });
-          return $('#open_close_accordion a').click(navigation.toggle);
-        }
-      };
-
-      Navigation.prototype.log = function(event, ui) {
-        return log_event('accordion', {
-          newheader: ui.newHeader.text(),
-          oldheader: ui.oldHeader.text()
-        });
-      };
-
-      Navigation.prototype.toggle = function() {
-        return $('.course-wrapper').toggleClass('closed');
-      };
-
-      return Navigation;
-
-    })();
-
-    return Courseware;
-
-  }).call(this);
-
-  window.FeedbackForm = (function() {
-
-    function FeedbackForm() {}
-
-    FeedbackForm.bind = function() {
-      return $('#feedback_button').click(function() {
-        var data;
-        data = {
-          subject: $('#feedback_subject').val(),
-          message: $('#feedback_message').val(),
-          url: window.location.href
-        };
-        return $.post('/send_feedback', data, function() {
-          return $('#feedback_div').html('Feedback submitted. Thank you');
-        }, 'json');
-      });
-    };
-
-    return FeedbackForm;
-
-  })();
-
-  $(function() {
-    $.ajaxSetup({
-      headers: {
-        'X-CSRFToken': $.cookie('csrftoken')
-      }
-    });
-    Calculator.bind();
-    Courseware.bind();
-    FeedbackForm.bind();
-    return $("a[rel*=leanModal]").leanModal();
-  });
-
-}).call(this);

static/sass/README.md

@@ -24,15 +24,4 @@ If you already install all the dependencies using Bundler, you can just do:
 
     $ bundle exec guard
 
-This will generate the sass file for development which some debugging
-information.
-
-### Before Commit
-
-Since this compiled style you're going to push are going to be used on live
-production site, you're encouraged to compress all of the style to save some
-bandwidth. You can do that by run this command:
-
-    $ bundle exec guard -g production
-
-Guard will watch your directory and generated a compressed version of CSS.
+This will execute `django-admin collectstatic`, which will compile the sass files

static/sass/base/_extends.scss

@@ -141,7 +141,7 @@ h1.top-header {
     }
 
     span.ui-icon {
-      background-image: url(images/ui-icons_454545_256x240.png);
+      background-image: url(../images/ui-icons_454545_256x240.png);
     }
 
     &.active {