Grunt Tutorial: Sample Gruntfile setup for javascript projects

Grunt is a JavaScript task run­ner, It helps in build­ing, pack­ag­ing your JavaScript project by per­form­ing user-defined tasks. It helps in devel­op­ment as well by pro­vid­ing var­i­ous automa­tion like watch and build etc, This grunt tuto­r­i­al will pro­vide you with  some exam­ples of such task:

  • Con­cat mul­ti­ple files.
  • Uglify/minify javascript source code files.
  • Copy images/fonts to oth­er direc­to­ry on build.
  • Com­press images
  • Com­pile SCSS, SASS, Cof­fee­Script, Type­Script on the go.
  • Run Devel­op­ment serv­er.
  • Push pro­duced build files to s3 buck­et, or oth­er cdn Serv­er.
  • Run lin­ters (jsHint, jsLint etc) .
  • Hash­ing of build files so that brows­er can load them when they are changed using grunt-hash
  • Merge all your tem­plate files into sin­gle json file using angu­lar-tem­plate.

 

Above exam­ples are more than enough to make you adopt grunt for your next project.  Ini­tial­ly i found it hard to set­up Grunt­file con­fig­u­ra­tions as they are not well doc­u­ment­ed. After spend­ing some hours  i was able to cre­ate a per­fect Grunt­file for my project, and since then i am reusing that in all oth­er projects and its sav­ing me tons of hours, So here i am going to explain how to write it Grunt­file for your project.

I am assum­ing grunt is already installed in your sys­tem and in your local project.

Basic concat of js/css files:

Cre­ate a blank file named Gruntfile.js  in your JavaScript project root.  and put fol­low­ing code in it:

 

This file exports a func­tion which takes an object called grunt, using this object we can load oth­er plu­g­ins (grunt-con­trib-watch, grunt-con­trib-con­cat) & define our tasks by pass­ing them as object to initConfig.

So lets write a task to con­cat our all JavaScript files fro a spe­cif­ic fold­er and copy them into sin­gle file:

Here we are reg­is­ter­ing a task named con­cat, which got two sub-tasks concat:lib  task is for ven­dor files, and concat:src is for source files. in src field we are spec­i­fy­ing file pat­ters which it needs to con­cat and in dest we are giv­ing a sin­gle file where it needs to copy those con­cat­ed files.
Now if you run grunt concat, from your project root direc­to­ry, you will see it doing its work. you can read more about con­cat plu­g­in here

 

 

Watch source code & build:

Here in watch task we are spec­i­fy­ing sub-task called scripts where we are spec­i­fy­ing file path pat­terns to watch in files para­me­ter, and grunt task to be run on file changes, so we want to run concat:src task on any file change in src direc­to­ry.  Sim­i­lar­ly you can add watch and con­cat tasks for css files. You can read about watch plu­g­in here

 

Here is com­plete file with css and js tasks:

 

 

 

Grunt task to copy files:

Some­time you need to copy some files from source direc­to­ry to your dist direc­to­ry, for these cas­es you can use ‘grunt-con­trib-copy’ task to per­form such oper­a­tions

 

Here copy:font grunt task will copy all font files to app/build/fonts direc­to­ry.

 

 

Hashing dist files using grunt:

 

 

vivek

Web Developer & Server Admin, Skilled in Java , PHP , LAMP, Tomcat, Mongo DB & SQL. Available for freelancing project or Open Source Contribution, Feel free to contact me at contact@viveksoni.net .

You may also like...