Friday, March 6, 2015

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

Wednesday, March 4, 2015

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. gulp.task('serve',function(){
  5.   var app = express();
  6.   app.use(require('connect-livereload')());
  7.   app.use(express.static(__dirname));
  8.   app.listen(4000);
  9. });

  10. gulp.task('liveReload',function(){
  11. lr.listen(35729);
  12. });

  13. gulp.task('default',['serve','liveReload'], function () {
  14.   gulp.watch('*',notifyLivereload);
  15.   gulp.watch('*.js',notifyLivereload);
  16. });


  17. // Notifies livereload of changes detected
  18. // by `gulp.watch()`
  19. function notifyLivereload(event) {

  20.   // `gulp.watch()` events provide an absolute path
  21.   // so we need to make it relative to the server root
  22.   var fileName = require('path').relative(__dirname, event.path);

  23.   lr.changed({
  24.     body: {
  25.       files: [fileName]
  26.     }
  27.   });
  28. }