diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000000..9730219ef2 --- /dev/null +++ b/Gemfile @@ -0,0 +1,10 @@ +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' diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000000..e63f6edcbd --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,49 @@ +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) + libnotify (0.7.2) + multi_json (1.3.5) + ruby_gntp (0.3.4) + sass (3.1.15) + spoon (0.0.1) + thor (0.15.2) + +PLATFORMS + ruby + +DEPENDENCIES + bourbon (~> 1.3.6) + guard (~> 1.0.3) + guard-coffeescript (~> 0.6.0) + guard-process (~> 1.0.3) + guard-sass! + libnotify (~> 0.7.2) + ruby_gntp (~> 0.3.4) + sass (= 3.1.15) diff --git a/Guardfile b/Guardfile new file mode 100644 index 0000000000..46dbf0d367 --- /dev/null +++ b/Guardfile @@ -0,0 +1,19 @@ +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 +end diff --git a/templates/coffee/README.md b/templates/coffee/README.md index 6c26529a5b..c6063e3549 100644 --- a/templates/coffee/README.md +++ b/templates/coffee/README.md @@ -15,9 +15,9 @@ npm (Node Package Manager) to be able to install the CoffeeScript compiler. Install Node via Homebrew, then use npm: - brew install node - curl http://npmjs.org/install.sh | sh - npm install -g git://github.com/jashkenas/coffee-script.git + $ brew install node + $ curl http://npmjs.org/install.sh | sh + $ npm install -g git://github.com/jashkenas/coffee-script.git (Note that we're using the edge version of CoffeeScript for now, as there was some issue with directory watching in 1.3.1.) @@ -28,32 +28,26 @@ Try to run `coffee` and make sure you get a coffee prompt. Conveniently, you can install Node via `apt-get`, then use npm: - sudo apt-get install nodejs npm && - sudo npm install -g git://github.com/jashkenas/coffee-script.git + $ sudo apt-get install nodejs npm && + $ sudo npm install -g git://github.com/jashkenas/coffee-script.git Compiling --------- -Run this command in the `mitx` directory to easily make the compiler watch for -changes in your file, and join the result into `application.js`: +We're using Guard to watch your folder and automatic compile those CoffeeScript +files. First, install guard by using Bundler: - coffee -j static/js/application.js -cw templates/coffee/src + $ gem install bundler + $ bundle install -Please note that the compiler will not be able to detect the file that get added -after you've ran the command, so you'll need to restart the compiler if there's -a new CoffeeScript file. +Then you can run this command: + + $ bundle exec guard Testing -======= +------- We're also using Jasmine to unit-testing the JavaScript files. All the specs are -written in CoffeeScript for the consistency. Because of the limitation of -`django-jasmine` plugin, we'll need to also running another compiler to compile -the test file. - -Using this command to compile the test files: - - coffee -cw templates/coffee/spec/*.coffee - -Then start the server in debug mode, navigate to http://127.0.0.1:8000/_jasmine -to see the test result. +written in CoffeeScript for the consistency. To access the test cases, start the +server in debug mode, navigate to http://127.0.0.1:8000/_jasmine to see the +test result. diff --git a/templates/sass/README b/templates/sass/README deleted file mode 100644 index f1a4618963..0000000000 --- a/templates/sass/README +++ /dev/null @@ -1,17 +0,0 @@ -This project is using Sass to generate it's CSS. Sass is a CSS preprocessor that allows for faster development of CSS. For more information about sass: http://sass-lang.com - -To use sass all you need to do is enter: -$ gem install sass - -We are also using Bourbon with sass. They are a generic set of mixins, and functions that allow for more rapid development of CSS3. Find out more about bourbon here: https://github.com/thoughtbot/bourbon - -To use bourbon you need to install it with: -$ gem install bourbon - -Then to generate Sass files cd to templates directory and watch the sass files for development: -$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb - -To generate a compressed css file for production: -$ sass --watch sass:../static/css/ -r ./sass/bourbon/lib/bourbon.rb --style :compressed - -These will automatically generate the CSS files on save. diff --git a/templates/sass/README.md b/templates/sass/README.md new file mode 100644 index 0000000000..3ef12cc71c --- /dev/null +++ b/templates/sass/README.md @@ -0,0 +1,38 @@ +SASS +==== + +This project is using Sass to generate its CSS. Sass is a CSS preprocessor that +allows for faster development of CSS. For more information about sass: + + http://sass-lang.com + +Install SASS +------------ + +To use sass, make sure that you have RubyGems install, then you can use Bundler: + + $ gem install bundler + $ bundle install + +This should ensure that you have all the dependencies required for compiling. + +Compiling +--------- + +We're using Guard to watch your folder and automatic compile those SASS files. +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.