{"id":11691,"date":"2014-02-06T22:56:18","date_gmt":"2014-02-06T17:26:18","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=11691"},"modified":"2014-02-07T15:58:51","modified_gmt":"2014-02-07T10:28:51","slug":"getting-started-with-grunt","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/getting-started-with-grunt\/","title":{"rendered":"Getting Started with Grunt:Task Runner"},"content":{"rendered":"

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.<\/p>\n

For such scenarios, we have\u00a0Grunt, <\/strong>to the rescue. I loved the way it made my work flow so easy.<\/p>\n

Grunt already has a lot of plugins for the task like compiling less CSS, command shell, minifying\u00a0CSS etc., or you can also create our own Grunt plugin for tasks which are repetitive or used on daily basis.<\/p>\n

Now we will understand grunt with the help of a plugin called “cssmin”, used to minify CSS files.<\/p>\n

Lets start with the setting up of grunt<\/p>\n

    \n
  1. Installing grunt-cli globally\n
    npm install -g grunt-cli<\/code><\/pre>\n<\/li>\n
  2. In your project directory install grunt and grunt plugin command\n
    npm install grunt --save-dev <\/code>\r\nnpm install grunt-contrib-mincss --save-dev\u00a0<\/code><\/pre>\n
    \u00a0It will add grunt and grunt plugins in devDependencies\u00a0in package.json.<\/div>\n<\/li>\n
  3. Gruntfile.js or Gruntfile.coffee
    \nGruntfile\u00a0<\/strong>must be there in project root directory after .json\u00a0package.This file contains<\/p>\n
      \n
    • The “wrapper” function<\/li>\n
    • Project and task configuration<\/li>\n
    • Loading Grunt plugins and tasks<\/li>\n
    • Custom tasks
      \nGruntfile must look like:<\/li>\n
    • [js]
      \n module.exports=function(grunt){
      \n \/\/here grunt code comes
      \n \/\/project configuration
      \n grunt.initConfig({
      \n      pkg:\u00a0grunt.file.readJSON(‘package.json’),
      \n      cssmin:{
      \n            minify: {
      \n            expand: true,
      \n            cwd: ‘public\/stylesheets\/css\/’,
      \n            src: [‘*.css’, ‘!*.min.css’],
      \n            dest: ‘public\/stylesheets\/mincss\/’,
      \n            ext: ‘.min.css’
      \n                     }
      \n            }
      \n       });
      \n\/\/load grunt plugins and register tasks
      \ngrunt.loadNpmTasks("grunt-contrib-cssmin");
      \ngrunt.registerTask(‘default’, [‘cssmin’]);
      \n[\/js]<\/p>\n

      \n<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
      Now its your turn to be the magician. Open your terminal, go to your project directory and write\u00a0<\/span><\/p>\n
       grunt cssmin<\/code><\/span><\/p>\n
      All your minified css will be generated in destination directory which you have mentioned in Gruntfile.js.<\/p>\n
      Hope it will make your work flow easier \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"
      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 […]<\/p>\n","protected":false},"author":66,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":1,"footnotes":""},"categories":[1185],"tags":[245,1307,1306,55,1124],"class_list":["post-11691","post","type-post","status-publish","format-standard","hentry","category-node-js-2","tag-css","tag-cssmin","tag-gruntjs","tag-javascript","tag-node-js"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t