Grunt Minify and Combine CSS

What is Grunt ?

Javascript Task Runner. https://gruntjs.com/

Minify every CSS file within a folder

Combine and Minify CSS files

Run two scripts together

 

Beginners Guide to LESS CSS Preprocessor

What is LESS?

Less is a CSS Preprocessor. http://lesscss.org/

Installing and Compiling

  1. Install Node.js https://nodejs.org/en/
  2. using npm ( Node Package Manager ) install LESS globally ( -g )
    1. $ npm install -g less
  3. Compile LESS

lessc style.less > style.css
  • lessc is used as the command for compiling

Error

'lessc' is not recognized as an internal or external command, operable program or batch file.


Solution for this Error

Compiling LESS

node C:\Folder\Name\node_modules\less\bin\lessc style.less > style.css

Note : \Folder\Name should be the folder in which the node_modules have been installed.

Beginners Guide to SASS CSS Preprocessor

What is SASS?

SASS is a CSS Preprocessor. http://sass-lang.com/

Installing and compiling

  1. Install Ruby https://rubyinstaller.org/
    • More Info : http://sass-lang.com/install
  2. Open Terminal or Command Prompt
gem install sass

Note : gems is a package manager for Ruby.

3. Check if sass got installed

sass -v

4. on a dedicated “test” folder , create two folders “scss” and “css”

C:\test

C:\test\scss

C:\test\css

5. In the Terminal or Command Prompt

C:\test>

Compile SASS

–watch command

–watch command is used to constantly monitor style.scss file for any changes and compile it as soon any change happens.

C:\test> sass –watch scss:css

sass --watch scss:css

–watch dedicated file

To watch dedicated file style.scss and style.css

sass --watch style.scss:style.css

style.scss is the main file

style.css is the complied file

Minify SASS

sass --watch scss:css --style compressed