Using Grunt with various Grunt Plugins is quite popular nowadays in Web Development Workflow.
I only get started recently by using “Watch” plugin to automatically compile SASS and LESS code to CSS by following with useful link: http://ryanchristiani.com/getting-started-with-grunt-and-sass/.
To install Node.js and Ruby in Windows is very straight forward. And by following the above link, I quickly set up LESS compilation environment as well in the same approach.
The approach can be in the following simple steps:
- 1. “npm init” to build package.json
- 2. Build the “devDependencies” with “grunt-contrib-sass, grunt-contrib-watch”
- 3. Build the “Gruntfile.js” to locate SASS/LESS source file to targeted CSS file in (absolute ) path. (Personally, I prefer absolute full path)
- 4. Set up the default grunt command to “Watch” auto compilation as long as the source file is updated and saved.
In old working environment, to install Ruby may be complicated. In recent development, this setup is becoming much easier (for what I have tried in Windows environment).
However, for the best practice, it may be better to use version control on Ruby and Node.js installation based on project (Thanks to my coworker Zhibin’s suggestion). The reason is that if Ruby and Node.js installation is affecting global, then latest update may give negative impact to old project setup and compilation process with compatibility issue. Thus, there are other software packages are getting more useful with Ruby and Node.js version control. I will learn more and more with upcoming posts to share my learning and what I think the best is for the best coding practice.
That is for the Grunt with SASS and LESS in basic instruction. I will come up with better workflow stuff I learn in the future.
Cheers and happy web development.