Add Guard to aid sass/coffeescript compilation
You can run this by do:
bundle install (first time only)
bundle exec guard
This commit is contained in:
Prem Sichanugrist
10
Gemfile
Normal file
10
Gemfile
Normal file
@@ -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'
|
||||
49
Gemfile.lock
Normal file
49
Gemfile.lock
Normal file
@@ -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)
|
||||
19
Guardfile
Normal file
19
Guardfile
Normal file
@@ -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
|
||||
@@ -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.
|
||||
|
||||
@@ -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.
|
||||
38
templates/sass/README.md
Normal file
38
templates/sass/README.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user