Thursday 20 November 2014

GULP - Build Tool

Gulp is a build tool like Grunt. Build tool used to create automated task. so programmer has to worry about only code(programming).
Motivation behind Build tool:
1. Maintain structure in big project.
2. Provide service to convert less file into css file.
Currently i am working on Cordova/Phonegap Projects. Structure of my project is as follow ,
Project Name folder
  • Hooks
  • Platform
  • Plugin (optional)
  • WWW
  • config.xml
WWW folder contains HTML,CSS & JS file maintain in any type structure you want. Cordova looks for index.html in WWW folder. It runs the application through index.html then create the bundle & copied into Platform folder & later on creates an APK file.

Problem with this approach:
it's quite difficult to maintain the file structure if we are writing less file instead of css file, coffee scripts file instead of javascript file, Jade file instead of HTML file. If we are using Bower dependency for CDN js file &  npm dependency for other files in projects. I can't think doing all above things without build tool. If we Remove build tool from picture then all above tasks needs to be done manually. Some how it restricting Programmer to doing programming.

How we Solve Problem :
So there are few option for us, either Gulp or Grunt, Grunt is terse (thats what i find ). Gulp is verbose, it is easy to learn , quick to understand.
so we created folder Name APP which has following folder structure.
  • HTML
  • CSS
  • JS
Now we don't really care about WWW folder, we write our code into APP folder obviously we use less instead of CSS , Jade instead of HTML, Coffee script instead of js, and gulp does rest of work.
It Converts all files into respective type and Copies files into WWW folder, Now when  i build cordova 
project it looks for WWW folder & it gets whatever it wants. Build tools not just copies file like dump :).. yeah i am kidding , it has also intelligence to take decisions like when to convert file, when to copy file, when to refresh server (web).  

Conclusion :  It makes Life Easy.

EDIT
All basics gulp task:
https://github.com/prashant7090/gulp-task

Thanks!

No comments:

Post a Comment