Ruby Gems - Compass and Sass

Ruby Gems

• RubyGems is a package manager for the Ruby programming language.
• Facilitates the easy installation of gems [Ruby Programs] and also in managing the Server that distributes gems

Why we go for Ruby Gems?

• Ruby Gems helps in downloading and managing the gems. In specific it helps in installing the Sass tool and compass too to compile the .scss files to .css

Installation of Ruby Gems

• RubyGems comes as a part of standard library with the Ruby Version 1.9.
• Download Ruby Gems from http://rubyinstaller.org/downloads/ and install it.

Installation of Gems:

Let's install sample Gem [Sass / Compass - Ruby Gems]

Step 1

    Check if Ruby and Ruby Gems have correctly installed using the commands

ruby --version

gem --version

Step 2

    Setup up the Environment in the Platforms Windows and Mac.

    Windows

    Run the below commands that removes the SSL security which in turn would help us handshake with Ruby Server      

        gem sources -r https://rubygems.org/ - to temporarily remove secure connection

gem sources -a http://rubygems.org/ - add insecure connection

gem update --system - now we're able to update rubygems without SSL

    Mac

    sudo gem update --system  

        xcode-select --install //Installs the xcode command line tool that lays the platform for installing compass later

Step 3

   Install the gems as below

    Windows:    

    gem install sass

  gem install compass

    Mac:

    sudo gem install sass

    sudo gem install compass

Gulp

What is Gulp?

• Gulp is advertised as streaming build system that does the job of Minification, Compilation, Watcher of File Changes etc and can be compared to grunt.

What are Environment Prerequistes?

• Gulp should be installed Globally using the command npm install gulp -g that we can access the local Glup Files using the Command Line  Commands.
• The Project Directory we are working should have Gulp Configuration File and Gulp installed within [whihc can be done by using the command npm install gulp].

How Gulp Works overall?

    We execute the Project running on Gulp using the command gulp. This would invoke the globally installed gulp and make it to search for the Gulp Configuration File [gulp.js] located locally within Project directory.

   Gulp.js then loads the locally installed gulp to achieve the Gulp tasks configured within.


Sample Gulp File to Live Reload the html files and also to host the files in the Server by invoking the index.html file as the StartUp

1. var gulp = require('gulp');
2. var express = require('express');
3. var lr = require('tiny-lr')();
4. 
   
5. gulp.task('serve',function(){
6.   var app = express();
7.   app.use(require('connect-livereload')());
8.   app.use(express.static(__dirname));
9.   app.listen(4000);
10. });
11. 
    
12. gulp.task('liveReload',function(){
13. lr.listen(35729);
14. });
15. 
    
16. gulp.task('default',['serve','liveReload'], function () {
17.   gulp.watch('*',notifyLivereload);
18.   gulp.watch('*.js',notifyLivereload);
19. });
20. 
    
21. 
    
22. // Notifies livereload of changes detected
23. // by `gulp.watch()`
24. function notifyLivereload(event) {
25. 
    
26.   // `gulp.watch()` events provide an absolute path
27.   // so we need to make it relative to the server root
28.   var fileName = require('path').relative(__dirname, event.path);
29. 
    
30.   lr.changed({
31.     body: {
32.       files: [fileName]
33.     }
34.   });
35. }