I was working on one of my projects which involved multiple task execution on regular basis. Well, I think that many of us have faced similar issues on their projects which increases our work and making it more time-consuming and increased work. Working in a community where people are actively developing tools to automate tedious processes, you assumes to have some tools to automate and speed up this process too.
For such scenarios, we have Grunt, to the rescue. I loved the way it made my work flow so easy.
Grunt already has a lot of plugins for the task like compiling less CSS, command shell, minifying CSS etc., or you can also create our own Grunt plugin for tasks which are repetitive or used on daily basis.
Now we will understand grunt with the help of a plugin called “cssmin”, used to minify CSS files.
Lets start with the setting up of grunt
- Installing grunt-cli globally
npm install -g grunt-cli
- In your project directory install grunt and grunt plugin command
npm install grunt --save-dev
npm install grunt-contrib-mincss --save-devIt will add grunt and grunt plugins in devDependencies in package.json.
- Gruntfile.js or Gruntfile.coffee
Gruntfile must be there in project root directory after .json package.This file contains
- The “wrapper” function
- Project and task configuration
- Loading Grunt plugins and tasks
- Custom tasks
Gruntfile must look like:
//here grunt code comes
src: [‘*.css’, ‘!*.min.css’],
//load grunt plugins and register tasks
Now its your turn to be the magician. Open your terminal, go to your project directory and write
All your minified css will be generated in destination directory which you have mentioned in Gruntfile.js.
Hope it will make your work flow easier 🙂