How to make gulp-sass task working on Windows?

Step-by-step guide

  1. Go to: http://rubyinstaller.org/
  2. Click download and load Ruby 1.9.3.(http://dl.bintray.com/oneclick/rubyinstaller/rubyinstaller-1.9.3-p545.exe?direct)
  3. By default it will install on your c:\… drive (don’t change any default location or whatsoever and please make sure that you don’t have any space in the path.)
  4. Set your PATH variable that includes your ruby installation location. Now you should be able to run gem evn in your command prompt ( you probably better run command prompt under administrator)

    pic1

  5. From the command prompt run gem install sass

     

     If you find an error that complains about network drive not found or something like that. Then probably your home path is not set to your local drive. You need to set the HOME path so that it connect with your local drive. To check the value, run command SET HOME Now, if you find it is not correctly, or pointing to some network drive then set this as SET HOME = %UserProfile% 
    
    You can read more about this error at http://help.rubygems.org/discussions/problems/333-install-gems-on-windows-7

     

     

  6. Now you need to install bundler run gem install bundler 
    
    If you find this error on gem installation: 
    ERROR: While executing gem ... (Gem::RemoteFetcher::FetchError)
    SocketError: getaddrinfo: No such host is known. (http://rubygems.org/latest_specs.4.8.gz)
    
    Then probably you need to look at your proxy setting. If you don't want to enforce any proxy then run this command, which will empty any proxy settings: gem install sass -p 
    
    If you want gem to use any specific proxy then run this: gem install sass -p http://myproxy.com
After following this steps, you should be able to run Gulp task for SaSS from windows machine.

An introduction to Gulp Build System

What is Gulp?

Just like Grunt, which is a build tool for front-end web development, Gulp is a new block that runs predefined tasks on static files such as CSS, HTML, Javascript, images. Some of these tasks includes:

  • minimise files size
  • watch file changes and automate the deployment

What is the major difference between Grunt and Gulp?

  • Grunt plug-ins often perform multiple tasks where as Gulp plug-ins are designed to do one thing only; it is clean and neat.
  • Grunt requires plug-ins for basic functionality such as file watching; Gulp has them built-in.
  • Grunt uses JSON-like data configuration files; Gulp uses leaner, simpler JavaScript code. You don’t create multiple configuration files in Gulp for each task like in Grunt.

How to use Gulp?

I have recorded a video about that explains you about:

  1. How to Install Gulp
  2. How to Install Gulp Plugins
  3. How to find Plugins
  4. How to define Gulp tasks
  5. How to execute bunch of tasks
  6. How to watch changes in static resources and execute tasks automatically.

 

 

 

 

References

  • http://www.smashingmagazine.com/2014/06/11/building-with-gulp/